Bug 247862

Summary:	Rendering bug when using position:fixed with containing block
Product:	WebKit	Reporter:	webkit
Component:	Layout and Rendering	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED INVALID
Severity:	Normal	CC:	bfulgham, simon.fraser, webkit, zalan
Priority:	P2
Version:	WebKit Nightly Build
Hardware:	Unspecified
OS:	Unspecified

Description webkit 2022-11-13 10:05:43 PST

For an example, see: https://game-point.net/misc/stickyMaskOverScroll/index4.htm

When a div is created with 'position:fixed' inside a container div with 'transform:translate(0); overflow:auto; max-height:300px;', and it is then given a sibling div whose content causes the container to overflow, the 'fixed' div should not change its position when the overflowing content is scrolled, in the same way that it doesn't if the fixed positioning containing block is the viewport.  However, when 'transform:translate(0)' is applied to the container to establish it as the fixed positioning containing block, the 'fixed' div starts to incorrectly become scrolled along with the overflowing content as if its positioning were set to 'absolute'.

Relevant part of the CSS spec: https://w3c.github.io/csswg-drafts/css-position/#fixed-cb

Comment 1 Simon Fraser (smfr) 2022-11-14 11:08:49 PST

All browsers show similar behavior here, which I think is correct; if a position:fixed element has an ancestor with a transform,then the position:fixed should behave like position:absolute.

Comment 2 webkit 2022-11-14 15:50:34 PST

Agreed.