Bug 229408 - Element rendered in the wrong place after sibling causes some layout changes
Summary: Element rendered in the wrong place after sibling causes some layout changes
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-08-23 04:54 PDT by Tomas Carnecky
Modified: 2021-08-24 20:42 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 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).