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

Issue 313532 link

Starred by 77 users

Issue metadata

Status: Fixed
Owner:
Closed: Aug 2014
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocked on:
issue 313018
issue 313562
issue 313573
issue 313938

Blocking:
issue 356186



Sign in to add a comment

Get will-change into spec: Its crazy hard as a web developer to make layers

Project Member Reported by nduca@chromium.org, Oct 31 2013

Issue description

Per research done by @baker, the downsides for the various compositing layer triggers:

Approach 1: translateZ/tranlsate3d


1A. Creates a new containing block causing position fixed descendants to be positioned relative to the translated element rather then the window.
2B. Creates a new stacking context.  This is problematic for things like relatively positioned menus.

Approach 2: -webkit-backface-visibility:hidden

2A. All positioned descendants also are promoted to a compositing layer creating many undesired layers.
2B. When an element with -webkit-backface-visibility: hidden is translated (for instance for an animation) /1 no longer applies, that is all of the elements positioned descendants loose their compositing layers (causing a bunch of paints).



There are many legitimate use cases where the user needs to hint the browser that an element "group" is a good candidate for caching, but not also affect the layering cases. @baker, can you re-tell us a "motivating case" that makes approach 1 infeasible but also makes approach 2 infeasible as well? I remember we started with position:sticky emulation but I forgot where we went from there.

Lets discuss. :)
 

Comment 1 Deleted

Comment 2 Deleted

Comment 3 Deleted

Comment 4 by nduca@chromium.org, Oct 31 2013

Blockedon: chromium:313562 chromium:313573
Owner: nduca@chromium.org
Status: Assigned
Summary: May need to be able to create layers without as many side effects (was: Need to be able to create layers without as many side effects)
I've filed two sub-bugs with specific repros for investigating the issues with the backface-visibility approach. I'll self-assign this to me while we discuss the child bugs so we have fewer floating bugs.
2A - I would have to see a specific repro to be sure, but here's my guess: if backface-visibility does not create a stacking context, then all the (DOM) descendants actually become siblings in the stacking-order tree.  Then all those layers may indeed overlap the backface-visibility element and require compositing.

Actually, these semantics are not set in stone.  The spec itself is ambiguous and there are conversations going on about how to clarify the semantics of backface visibility in relation to preserve-3d (which when not specified, would be to implicitly flatten the subtree).

2B. Adding the transform back, I would imagine causes the layer to become a stacking context and containing block again, so then all its descendants would neatly fit under one composited layer unless there are other reasons to separately composite the descendants.

Comment 6 Deleted

Comment 7 Deleted

Comment 8 Deleted

Comment 9 by nduca@chromium.org, Nov 1 2013

Blockedon: chromium:313938

Comment 10 by ajuma@chromium.org, Nov 27 2013

There's currently a discussion on www-style about adding a layer creation hint to CSS: http://lists.w3.org/Archives/Public/www-style/2013Nov/0414.html

Comment 11 by ajuma@chromium.org, Nov 27 2013

Cc: nduca@chromium.org
Owner: ajuma@chromium.org

Comment 12 by nduca@chromium.org, Dec 18 2013

Summary: Get will-animate into spec: Its crazy hard as a web developer to make layers (was: Its crazy hard as a web developer to make layers)

Comment 13 by nduca@chromium.org, Jan 29 2014

Summary: Get will-change into spec: Its crazy hard as a web developer to make layers (was: Get will-animate into spec: Its crazy hard as a web developer to make layers)
Spec at: http://tabatkins.github.io/specs/css-will-change/
Project Member

Comment 14 by bugdroid1@chromium.org, Feb 19 2014

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=167394

------------------------------------------------------------------------
r167394 | ajuma@chromium.org | 2014-02-19T03:22:09.620790Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSProperties.in?r1=167394&r2=167393&pathrev=167394
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/parse-will-change.html?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSProperty.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/frame/UseCounter.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/BisonCSSParser-in.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/StyleRareNonInheritedData.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/BisonCSSParser.h?r1=167394&r2=167393&pathrev=167394
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/parse-will-change-expected.txt?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderCustom.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/StyleRareNonInheritedData.h?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPropertyNames.in?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/RuntimeCSSEnabled.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt?r1=167394&r2=167393&pathrev=167394
   A http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/StyleWillChangeData.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSComputedStyleDeclaration.cpp?r1=167394&r2=167393&pathrev=167394
   A http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/StyleWillChangeData.h?r1=167394&r2=167393&pathrev=167394
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/RuntimeEnabledFeatures.in?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.cpp?r1=167394&r2=167393&pathrev=167394
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/core.gypi?r1=167394&r2=167393&pathrev=167394

Implement 'will-change' parsing

This implements parsing for the 'will-change' CSS
property. This property is protected by a runtime
flag.

Intent-to-implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/M62y2nKZ-gE

Spec: http://tabatkins.github.io/specs/css-will-change/

BUG= 313532 

Review URL: https://codereview.chromium.org/167603002
------------------------------------------------------------------------
Project Member

Comment 15 by bugdroid1@chromium.org, Feb 28 2014

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=168134

------------------------------------------------------------------------
r168134 | ajuma@chromium.org | 2014-02-28T15:05:49.162482Z

Changed paths:
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/containing-block-creation.html?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositingReasonFinder.cpp?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/stacking-context-creation-expected.html?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/stacking-context-creation.html?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositingReasonFinder.h?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBox.h?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.cpp?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBoxModelObject.h?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/composited-layers.html?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/CompositingReasons.h?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleAdjuster.cpp?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/composited-layers-expected.txt?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/containing-block-added-expected.html?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/containing-block-removed-expected.html?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/containing-block-added.html?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/containing-block-removed.html?r1=168134&r2=168133&pathrev=168134
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/containing-block-creation-expected.html?r1=168134&r2=168133&pathrev=168134
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderTableRow.h?r1=168134&r2=168133&pathrev=168134

Implement will-change-based creation of layers, stacking contexts, and containing blocks

This uses an element's will-change value to determine whether 
it should be composited, create a stacking context, or become
a containing block. will-change is currently behind a runtime flag.

Intent-to-implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/M62y2nKZ-gE

Spec: http://tabatkins.github.io/specs/css-will-change/

BUG= 313532 

Review URL: https://codereview.chromium.org/175263002
------------------------------------------------------------------------
Project Member

Comment 16 by bugdroid1@chromium.org, Mar 12 2014

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=169013

------------------------------------------------------------------------
r169013 | ajuma@chromium.org | 2014-03-12T13:28:14.730078Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.cpp?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/frame/Settings.in?r1=169013&r2=169012&pathrev=169013
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint-expected.txt?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBoxModelObject.h?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/public/platform/WebContentLayer.h?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositedLayerMapping.cpp?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/GraphicsLayer.cpp?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositedLayerMapping.h?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/GraphicsLayer.h?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderTableRow.h?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositingReasonFinder.cpp?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/web/WebSettingsImpl.cpp?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/public/web/WebSettings.h?r1=169013&r2=169012&pathrev=169013
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint.html?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/web/WebSettingsImpl.h?r1=169013&r2=169012&pathrev=169013
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderBox.h?r1=169013&r2=169012&pathrev=169013

Implement will-change-based GPU rasterization hint

This uses an element's will-change value to determine
whether it should have a GPU rasterization hint, and
uses a newly-added 
acceleratedCompositingForGpuRasterizationHintEnabled
setting to determine whether to create composited layers
for elements that have a GPU rasterization hint.

will-change is currently behind a runtime flag.

Intent-to-implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/M62y2nKZ-gE

Spec: http://tabatkins.github.io/specs/css-will-change/

BUG= 313532 

Review URL: https://codereview.chromium.org/183103007
------------------------------------------------------------------------
Project Member

Comment 17 by bugdroid1@chromium.org, Mar 13 2014

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=169077

------------------------------------------------------------------------
r169077 | ajuma@chromium.org | 2014-03-13T02:19:50.304490Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/web/WebRuntimeFeatures.cpp?r1=169077&r2=169076&pathrev=169077

Make BleedingEdgeFastPaths imply will-change 

This enables the CSSWillChange RuntimeEnabledFeature when the
BleedingEdgeFastPaths WebRuntimeFeature is enabled.

BUG= 313532 

Review URL: https://codereview.chromium.org/197463002
------------------------------------------------------------------------

Comment 18 by ajuma@chromium.org, Mar 25 2014

Blocking: chromium:356186
Project Member

Comment 19 by bugdroid1@chromium.org, Apr 18 2014

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=171908

------------------------------------------------------------------
r171908 | ajuma@chromium.org | 2014-04-18T00:08:27.710599Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=171908&r2=171907&pathrev=171908
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint-suppresses-compositing-expected.txt?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderObject.cpp?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderLayerScrollableArea.cpp?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/graphics/CompositingReasons.h?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositedLayerMapping.cpp?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderLayer.cpp?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositingRequirementsUpdater.cpp?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderLayer.h?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositingReasonFinder.cpp?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/RenderLayerCompositor.cpp?r1=171908&r2=171907&pathrev=171908
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint-added.html?r1=171908&r2=171907&pathrev=171908
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint-removed.html?r1=171908&r2=171907&pathrev=171908
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/compositing/CompositingReasonFinder.h?r1=171908&r2=171907&pathrev=171908
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint-suppresses-compositing.html?r1=171908&r2=171907&pathrev=171908
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint-added-expected.txt?r1=171908&r2=171907&pathrev=171908
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/compositing/will-change/gpu-rasterization-hint-removed-expected.txt?r1=171908&r2=171907&pathrev=171908

Suppress layer creation for descendants of GPU-rasterized layers

This suppresses layer creation in descendants (in stacking
order) of layers that are compositing for GPU-rasterization
hints. More specifically, compositing for animations and for
will-change is suppressed in these layers.

BUG= 313532 

Review URL: https://codereview.chromium.org/233063004
-----------------------------------------------------------------
Status: Fixed
We're shipping will-change now.

Sign in to add a comment