If you have an element with
position: fixed inside of an element that has
overflow: hidden, what’s the expected rendering when you need to, uh, overflow? Should the inner fixpos element be clipped by its parent or not?
Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
So, according that spec text, the parent element’s overflow shouldn’t have any effect because the fixpos’ parent element is the viewport.
Neat. But how do browsers behave? Open this testcase and have a look:
Everything behaves as the spec describes.
overflow: hidden on the parent is ignored. High-fives all around.
Now if you throw in both a
z-index: 1 (any number will do) and a
position: relative on the parent element, things get…different.
Same as first testcase (what I would expect): Mobile + Desktop Firefox Mobile Chrome Desktop Edge
Different from first testcase:
Mobile + Desktop Safari: fixpos element is clipped by parent (meaning
overflow: hidden worked).
Mobile + Desktop Opera (Presto): same as Safari
Desktop Chrome: if the viewport is smaller than the containing parent, then
overflow: hidden on the parent kicks in (resize the browser window to see it).
Mobile + Desktop Opera (Blink): same as Chrome
And now, a 3rd testcase which adds
user-scalable=no to the meta (viewport) element (the same effect happens if you constrain
maximum-scale to 1.
The only browser this seems to make a difference in is Chrome on Android, which now clips the child element. I think I discovered this on accident.
So it seems like non-Edge and non-Firefox browsers treat a
position: fixed element as a
position: absolute element (or something?), when contained by a
position: relative parent that also has a
Unfortunately at least one site relies on this bug (see this comment).
If you happen to know why, send a self-addressed stamped envelope to twitter dot com slash miketaylr and let me know.
See https://twitter.com/gregwhitworth/status/609095284010852352 from @gregwhitworth. I’ll try to write a follow-up post when I understand everything.