Bug 255358 - Hairline gaps between elements when using isolation: isolate and mix-blend-mode: plus-lighter
Summary: Hairline gaps between elements when using isolation: isolate and mix-blend-mo...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-04-12 13:07 PDT by Robert Flack
Modified: 2023-04-12 15:29 PDT (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Robert Flack 2023-04-12 13:07:56 PDT 
Using isolation: isolate on a container with mix-blend-mode: plus-lighter on descendents should result in no gaps between separately composited adjacent elements in the same isolation container. This works on Chrome and Firefox but on Safari there are visible gaps between elements, e.g. https://jsbin.com/norikac/edit?html,css,output

For a simpler example, see https://jsbin.com/jowoken/edit?html,css,output
Or, https://jsbin.com/retafoy/edit?html,css,output for the animation in a paused state showing a visible gap.
Comment 1 Radar WebKit Bug Importer 2023-04-12 15:28:53 PDT 
<rdar://problem/107962749>
Comment 2 Radar WebKit Bug Importer 2023-04-12 15:29:11 PDT 
<rdar://problem/107962770>