Bug 229408

Summary: Element rendered in the wrong place after sibling causes some layout changes
Product: WebKit Reporter: Tomas Carnecky <tomc>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: koivisto, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   

Description Tomas Carnecky 2021-08-23 04:54:54 PDT
See this Codesandbox example: https://zmslt.csb.app

 - Note the magenta box in the center bottom of the screen
 - Click on the image (to enlarge it, it simply removes the explicit width/height on the img)
 - Notice how the magenta box shifts to the top left.

Safari Technology Preview, Release 130 (Safari 15.0, WebKit 16612.1.26.1.5)

It works correctly when you:

 - comment out the 'inset: 0;' line in .overlay
 - comment out the 'display: flex;' line in .overlay
 - comment out the 'overflow: auto;' line in .content
 - comment out the 'flex: 100% 0 1;' line in .content
Comment 1 Radar WebKit Bug Importer 2021-08-24 11:31:00 PDT
<rdar://problem/82301706>
Comment 2 zalan 2021-08-24 20:42:09 PDT
This looks like a composition/painting issue on the fixed element (offsetTop/Left returns the correct value and toggling composition borders fixes the issue).