Issue metadata
Sign in to add a comment
|
Position sticky element rendered in one position, located in another
Reported by
powerb...@gmail.com,
Dec 1 2017
|
||||||||||||||||||||||||
Issue description
Chrome Version : 62.0.3202.94
OS Version: OS X 10.12.6
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Safari: FAIL
Firefox: FAIL
IE/Edge: N/A
What steps will reproduce the problem?
1. Create a fixed position element with padding-top of 4rem (does obviously not have to be exact) in the center of the screen, covering the entire viewport
2. Create an inner element
3. Inside the inner element, add a sticky element to the top of the inner element containing one clickable element like a <a>
4. When at scrollTop = 0 the element will be rendered at the same position as it's clickable area
5. When scrolling down the clickable element will be rendered correctly, but its clickable area is now 4rem _below_ the rendered element (4rem = same as padding of fixed element)
What is the expected result?
The clickable area should be the same as where the element is rendered
What happens instead of that?
The clickable area is _below_ the rendered element
Please provide any additional information below. Attach a screenshot if
possible.
Curiously in Firefox and Safari the sticky element is also rendered incorrectly, at least the clickable area and the actual element are in the same positions though.
UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
,
Dec 1 2017
,
Dec 4 2017
,
Dec 4 2017
Tested this issue on Mac OS 10.12.6 using chrome reported version #62.0.3202.94, canary #64.0.3282.5 and unable to reproduce the issue with the below steps: 1.Downloaded and Opened the given position-sticky-bug.html file 2.Inspected the element and observed that the clickable area is same as where the element is rendered. Attaching the screenshot for reference. @Reporter: Please find the below screenshot and let us know if anything is missed from our end. Thanks.
,
Dec 4 2017
Hmm... I have no idea what's changed, but for some reason I now get the same behaviour in Chrome as I do in Safari and Firefox. I.e. the sticky element is now both rendered and actually located 4rem from the top of the fixed element when I scroll. As you can see in my first screenshot this did not happen when I submitted the bug. I'm still on the same Chrome version and I'm testing with the exact same code so I'm a little baffled. It's still a bug though, right? If I set position: sticky; top: 0; it should stick to the _top_ of the scrollable element - correct?
,
Dec 4 2017
Thank you for providing more feedback. Adding requester "rkalavakuntla@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Dec 4 2017
Over to flackr for further triage.
,
Dec 4 2017
FYI,in Chrome Android I still get the first behavior. I.e. the sticky element is rendered correctly, but its clickable area is below where it's rendered (I tried the fiddle just now on my phone)
,
Aug 1
I'm still seeing this on stable 68.0.3440.84 and canary 70.0.3508.0. The bug occurs on the sticky element only if there is some scrolling. Thanks for looking into this.
,
Aug 1
Looks like the sticky position element doesn't respect the scroller's padding when it is composited (i.e. high dpi only). Yi, can you have a look?
,
Sep 12
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by powerb...@gmail.com
, Dec 1 2017