New issue
Advanced search Search tips

Issue 656685 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Nov 2016
Cc:
jmukthavaram@chromium.org
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

(CSS) Will-change property break fixed property of element inside scrollable element

Reported by diha...@gmail.com, Oct 17 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

Steps to reproduce the problem:
1. open page https://jsfiddle.net/ngmxok75/
2. try scrolling result – header not fixed
3. remove will-change in #mustache-target
4. try scrolling result again – header fixed

What is the expected behavior?
inner element must be fixed

What went wrong?
inner element not fised

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 53.0.2785.143  Channel: n/a
OS Version: OS X 10.12.0
Flash Version: Shockwave Flash 23.0 r0

Comment 1 by jmukthavaram@chromium.org, Oct 18 2016

Cc: jmukthavaram@chromium.org
Labels: Needs-Feedback
Tested this issue & unable to reproduce on windows 7,Mac 10.11.4,Linux Ubuntu 14.04 with Chrome stable version-54.0.2840.59 and latest Canary version-56.0.2891.0 with below steps:

1. Opened page https://jsfiddle.net/ngmxok75/
2. Scrolled page -observed the Header & scrollbar displayed normally 
3. Removed " will-change " tag in '#mustache-target'
4. Clicked on 'Run'
5. Observed that  header expanded to right side &  scroll bar overlapped on the header.

Please find the attached screencast for reference & please confirm the expected behaviour for the same.

Note:
Observed the same behaviour on Chrome & Firefox browsers as per the steps mentioned in Comment#0.

Thanks.
656685-Mac.mov
11.3 MB Download

Comment 2 by andymutton@chromium.org, Nov 2 2016

Status: WontFix (was: Unconfirmed)
Closing as WontFix. From discussion with tabatkins@chromium.org...

Not a bug. will-change has some side-effects, to prevent the rendering
from jumping around when you actually do animate the value.  In
particular, if any value of a listed property would cause a stacking
context, then will-change causes a stacking context. In this case, the
culprit is "opacity" - any value < 1 causes a stacking context, so
`will-change: opacity` does too.  This means the header is fixed to
the block, and scrolls with it, rather than being attached to the root
element.

You'd get the same effect without will-change once you actually *did*
start changing opacity, so will-change is preventing you from making a
mistake here. ^_^
►

Sign in to add a comment