Bug 229408

Summary:	Element rendered in the wrong place after sibling causes some layout changes
Product:	WebKit	Reporter:	Tomas Carnecky <tomc>
Component:	Compositing	Assignee:	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).