New issue
Advanced search Search tips

Issue 690381 link

Starred by 4 users

Issue metadata

Status: Duplicate
Merged: issue 670274
Owner: ----
Closed: Feb 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Sticky elements are offset by box-shadow

Reported by andreas....@invise.se, Feb 9 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce the problem:
1. Make an element position: sticky
2. Give the same element box-shadow
3. The element is offset the same amount as its box-shadow

What is the expected behavior?
The element should not move based on its box-shadow

What went wrong?
The element moved because of its box-shadow

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 56.0.2924.87  Channel: stable
OS Version: OS X 10.12.3
Flash Version: Shockwave Flash 24.0 r0

https://jsfiddle.net/j84gghh7/

 
sticky-box-shadow-offset.html
576 bytes View Download
Labels: Needs-Triage-M56
I noticed that I managed to write "doctyp" instead of "doctype" in my example file. The bug occurs regardless (as you can see in the fiddle)
Labels: Needs-Bisect
I don't see the element moving its layout, but if I remove the 'position:sticky' I do see a change in behaviour of the box shadow being drawn on top of it.

Locally, I see

55.0.2883.87 (Official Build) (64-bit) : with and without 'position:sticky" - Shadow behind 800x600 element
58.0.3010.0 (Official Build) canary (64-bit) : with 'position:sticky' - Shadow in front of 800x600 element, without 'position:sticky' - Shadow behind 800x600 element

Andreas - can you please provide some screenshots showing the difference in behaviour you're seeing to make sure we're observing the same thing?
Labels: -Needs-Bisect Needs-Feedback
These are taken from the JSFiddle. In the first screenshot the header has a shadow but is offset from the top left by .5rem (same amount as the shadow).

In the second screenshot there is no shadow and the header stays where it should.
Screen Shot 2017-02-13 at 11.41.24.png
86.0 KB View Download
Screen Shot 2017-02-13 at 11.41.39.png
87.1 KB View Download
I am experiencing the same issue in Chrome 56, Safari and Firefox works fine.
Here is another example: http://codepen.io/rjonsson/pen/pRmgag

Comment 7 by mikael...@gmail.com, Feb 21 2017

I'm seeing the same issue on my retina screen but it works as expected on my non retina screen.

Comment 8 by mikael...@gmail.com, Feb 22 2017

Tested in Chrome Canary 58.0.3020.0 and it works as expected.
Labels: -Needs-Feedback
Components: -Blink>CSS Blink>Layout

Comment 11 by e...@chromium.org, Feb 23 2017

Cc: flackr@chromium.org
Mergedinto: 670274
Status: Duplicate (was: Unconfirmed)

Sign in to add a comment