![]() Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Therefore, a scrollbar is added to help the reader to scroll the content. See from I’ll try to write a follow-up post when I understand everything.This text is really long and the height of its container is only 100 pixels. If you happen to know why, send a self-addressed stamped envelope to twitter dot com slash miketaylr and let me know. Unfortunately at least one site relies on this bug (see this comment). 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 z-index set. The only browser this seems to make a difference in is Chrome on Android, which now clips the child element. Mobile + Desktop Opera (Blink): same as ChromeĪnd now, a 3rd testcase which adds user-scalable=no to the meta (viewport) element (the same effect happens if you constrain intial-scale and maximum-scale to 1. Mobile + Desktop Opera (Presto): same as Safariĭesktop 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 Safari: fixpos element is clipped by parent (meaning overflow: hidden worked). Same as first testcase (what I would expect): 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. overflow: hidden on the parent is ignored. But how do browsers behave? Open this testcase and have a look:Įverything behaves as the spec describes. So, according that spec text, the parent element’s overflow shouldn’t have any effect because the fixpos’ parent element is the viewport. ![]() The only difference is that for a fixed positioned box, the containing block is established by the viewport. ![]() 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?įixed positioning is similar to absolute positioning. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |