Bug 247862 - Rendering bug when using position:fixed with containing block
Summary: Rendering bug when using position:fixed with containing block
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-11-13 10:05 PST by webkit
Modified: 2022-11-14 15:50 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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.