Issue metadata
Sign in to add a comment
|
Layout of elements with position: sticky are affected by their shadows
Reported by
oliver.b...@digital.cabinet-office.gov.uk,
Jan 27 2017
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36 Example URL: http://codepen.io/36degrees/pen/MJOgNj Steps to reproduce the problem: 1. Add an element to the page with both position: sticky and a box shadow 2. Ensure there is enough height to the page for the sticky behaviour to become enabled What is the expected behavior? The shadow should not affect the layout of the element. What went wrong? The elements layout is adjusted such that its position allows for the left and top shadows of the element to be rendered on screen. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 56.0.2924.76 Channel: stable OS Version: OS X 10.12.2 Flash Version: Shockwave Flash 24.0 r0 Not happening in Safari or Firefox
,
Jan 29 2017
,
Jan 30 2017
I have just discovered that this bug only occurs while the dev tools are open AND device preview mode is active. In all other scenarios it seems to work perfectly.
,
Jan 30 2017
Not the case for me. Me for its broken regardless of devtools and device previewer. MacBook Pro w/ Retina Display (late 2013) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36
,
Jan 30 2017
Interesting - I also have a Macbook Pro w/ Retina Display which is connected to a normal resolution monitor. When I test it on the monitor I get the same results as I mentioned above, but on the retina display it consistently breaks as you've mentioned.
,
Jan 30 2017
That is odd! I can confirm that the same thing is happening on my laptop – bug occurs when Chrome on the primary (retina) display OR developer tools is open and device mode is enabled.
,
Jan 30 2017
,
Jan 31 2017
z-index might possibly have something to do with it, as well. I went to the pen and dragged it back and forth from my retina screen to an external monitor. External monitor was fine, retina didn't. However, that wasn't the result on my site. My site had two other conditions that caused the bug when sticky was implemented: a z-index on the navbar that also had a box-shadow, and a child element below it that had transform: translate3d(0,0,0) applied to it. Both removing the box-shadow from the navbar or the transform from the child element appear to have resolved the issue. I forked the earlier pen and added both of those properties to the respective elements. Example: https://codepen.io/sebellows/pen/WRMZMK
,
Feb 2 2017
I faced same problem. Generally border-box dose not include box shadow. i.e box shadow never affects element position, and bounding box. On chrome 56 which now supports sticky position, seems chrome counts shadow in border-box when position of element is set to sticky. https://cl.ly/1u3t0U3g1G47 << the menu should be in 0,0 position. which used to be in v 55
,
Feb 3 2017
This is similar to the bug 688022 .Hence merging this into 688022. Please feel free to undupe if not similar. Thanks, |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by manoranj...@chromium.org
, Jan 27 2017