New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 672441 link

Starred by 2 users

Issue metadata

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



Sign in to add a comment

Position sticky fails to work when position is toggled with a new layer element

Reported by m...@xenforo.com, Dec 8 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2944.0 Safari/537.36

Steps to reproduce the problem:
See demo: https://jsfiddle.net/u238nc1x/1/

Scrolling the page does not maintain the sticky "sticky navigation" element. Using dev tools, you can see that it thinks the element should be visible at the top of the page.

Toggling a CSS attribute in dev tools causes it to redraw in the correct position but it never regains stickiness unless opacity is removed.

What is the expected behavior?
The sticky navigation should stay at the top of the page when scrolled.

What went wrong?
This appears to specifically be caused by the temporary position toggle in JS in combination with something like opacity to create a new layer. I have also reproduced this with box-shadow.

It's useless in this reduced test case, but the use case here is to determine the non-sticky, natural position.

Removing either the opacity or the JS prevents the issue.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 57.0.2944.0  Channel: canary
OS Version: 10.0
Flash Version: 

This works as expected in Firefox and Safari.
 

Comment 1 by m...@xenforo.com, Dec 8 2016

It appears that this version of the fiddle is inconsistent. Most of the times I had problems, but after submitting this bug, it worked correctly.

I've wrapped the position switch in a setTimeout and I believe this may make it more consistent. Please try this demo: https://jsfiddle.net/u238nc1x/2/

Comment 2 by samli@chromium.org, Dec 11 2016

Labels: Needs-TestConfirmation
Unable to repro on Mac Version 57.0.2948.0 canary.


Comment 3 by m...@xenforo.com, Dec 11 2016

I can't repro on Mac Canary either. However, I can repro on Windows Canary 57.0.2948.0.

Comment 4 by ajha@chromium.org, Dec 12 2016

Labels: M-57 Needs-Bisect

Comment 5 by ajha@chromium.org, Dec 12 2016

Cc: ajha@chromium.org
Labels: -Needs-TestConfirmation -Needs-Bisect OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Interestingly I am able to reproduce the issue on the latest canary(57.0.2948.0) of Mac OS 10.11.6, Windows-10 and Linux Ubuntu 14.04 as per the jsfiddle from C#1. Similar behavior is seen on older chrome version: 30.0.1549.0 as tested on Windows-10.


Marking this as Untriaged and Non-regression issue.

Comment 6 by phistuck@gmail.com, Dec 12 2016

#5 - the feature (position: sticky) was only enabled by default on Chrome 56, so it makes sense that anything earlier than 56 fails in the same way.

Comment 7 by r...@opera.com, Dec 12 2016

Status: WontFix (was: Untriaged)
Fails in Opera with a 55 version of Chromium. Works for me in Opera Developer with Chromium 56.0.2914.3. Also works on ToT.

Comment 8 by r...@opera.com, Dec 12 2016

Status: Available (was: WontFix)
Oh, I didn't see comment #5. As I said, it works for me in content_shell ToT.

Comment 9 by r...@opera.com, Dec 12 2016

Status: Untriaged (was: Available)

Comment 10 by r...@opera.com, Dec 12 2016

Linux, that is.

Comment 11 Deleted

Comment 12 by r...@opera.com, Dec 12 2016

And with the version in comment #1 it fails on ToT. The opacity is important. Setting opacity to 1 and it works again.

Comment 13 by r...@opera.com, Dec 12 2016

Cc: wangxianzhu@chromium.org r...@opera.com
Components: -Blink>CSS Blink>Layout Blink>Paint
Labels: -OS-Linux -OS-Windows -OS-Mac OS-All
Discussed with mstensho@opera.com. We think this is most likely paint, possibly layout. Xianzhu, do you have any idea?

Owner: flackr@chromium.org
Status: Assigned (was: Untriaged)
This seems like a bug in the new implementation due to the opacity introducing a stacking context, or something like that.
Cc: flackr@chromium.org
Owner: smcgruer@chromium.org
I suspect this has the same root issue as  issue 685658 .
Mergedinto: 685658
Status: Duplicate (was: Assigned)
This should be the same bug as  issue 685658 , which is now fixed in ToT. Marking as duplicate, please reopen if you can still reproduce in Chrome Canary (58.0.3018.3 onwards).
Labels: BugSource-User PaintTeamRetriaged PaintTeamTriaged-20161212

Sign in to add a comment