Stack Overflow
Stack Overflow

Questions tagged [will-change]

will-change is a CSS property, which allows an author to inform the user agent ahead of time of what kinds of changes they are likely to make to an element.

This allows the user agent to optimize how they handle the element ahead of time, performing potentially-expensive work preparing for an animation before the animation actually begins. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

W3C Proposal: CSS Will Change Module Level 1.

29 questions
77
votes
7 answers

How to use and how works CSS' will-change property?

I found CSS will-changeW3.org docs, MDN docs property (which already works in Chrome and is partiali supported by Firefox and Opera) but I'm not really sure how it works. Does anybody know something more about this mysterious thing? I have just read…
LJ Wadowski
  • 6,424
  • 11
  • 43
  • 76
14
votes
1 answer

Chrome CSS bug: "translate3d" inside a rotated element does not obey "overflow: hidden"

Take a look at this CodePen to see what I mean: .perspective-container { margin: 50px 0; perspective: 1000px; perspective-origin: 0 50%; } .card { border: 10px solid blue; width: 300px; height: 300px; overflow: hidden; …
Duane Barlow
  • 183
  • 8
6
votes
1 answer

will-change breaks showing position absolute div on :hover

I have an issue with will-change. I have no idea why it causes this problem but when I add will-change on wrapper in which I have list with hidden divs (which should show up on hover) it breaks showing that divs. t shows part of it or not at all…
Dawid Krajewski
  • 324
  • 2
  • 15
5
votes
1 answer

CSS animation overloads CPU

I have an animation and JS for alternating 2 divs and change their background images (from an array of a few dozens images), sort of interchangeable divs. Everything works just fine, however when the animation runs I can see that my CPU is at 100%.…
Igal
  • 5,833
  • 20
  • 74
  • 132
3
votes
1 answer

Why does will-change:opacity treat fixed elements differently than will-change:transform in chrome?

I am trying to optimize the scrolling of my web app. I have data tables with tons of data, and scrolling gets pretty bad. I added will-change: transform to the data table but it broke my table headers that are position: fixed (I make them fixed to…
user3692823
  • 341
  • 1
  • 11
2
votes
1 answer

`will-change: opacity` doesn't create new stacking context

in MDN web docs it is mentioned that stacking context is formed in these scenarios: Element with a opacity value less than 1 Element with a will-change value specifying any property that would create a stacking context on non-initial value but…
karam barakat
  • 21
  • 3
2
votes
1 answer

IOS web browser, "will-change" cause render issue

Css attribute "will-change" make animation performance better. But seem like it'll disable some render in IOS mobile browser under special condition. The behavior of following code in IOS mobile browser: Click "click me", add count to…
李晓爽
  • 61
  • 9
2
votes
1 answer

Will-change with SCSS in Jekyll

I am using Jekyll and Netlify to build a website. Everything has been working so far. I use a stylesheet in SCSS, which Jekyll converts to CSS at build. I experimented with adding the will-change property like the spec says to do it. However, the…
Christian Sirolli
  • 246
  • 1
  • 6
  • 18
2
votes
1 answer

Keep overflow:hidden behavior after will-change:transform

I have a parent and a child elements: .parent { will-change: transform; overflow: hidden; position: absolute; } .child { position: fixed; top: 80px; left: 80px; } without will-change:transform style, .child element regardless of…
Mohammad Azhdari
  • 454
  • 6
  • 14
2
votes
2 answers

Javascript before and after events for window resize

onresize can be used for knowing window has been resized. Is there any similar notification/event before window resizes. I want to set will-change on some elements before window resize starts and subsequently remove that after window has resized.
Nitesh
  • 2,681
  • 4
  • 27
  • 45
2
votes
2 answers

Chrome DevTools layer borders color meaning

I have two DOM elements that exist on their own composite layers because of this CSS rule: .element-one, .element-two { will-change: transform; transform: translateZ(0); // Fallback } Now, I can inspect these layers using Chrome dev tool's…
Prashant
  • 7,340
  • 2
  • 25
  • 24
1
vote
2 answers

Would 'will-change' applied via the Web Animations API have the desired effect?

According to Google: The general rule of thumb is that if the animation might be triggered in the next 200ms [...] then having will-change on animating elements is a good idea. For most cases, then, any element in your app’s current view that you…
Slbox
  • 10,957
  • 15
  • 54
  • 106
1
vote
1 answer

`position: fixed` not working when parent has `will-change: transform` property

I have used will-change: transform on a parent element which has made scrolling smooth. But there are some child divs that don't have the static position anymore despite using position: fixed. For the demonstration, I have created this basic…
Hashir Sarwar
  • 1,115
  • 2
  • 14
  • 28
1
vote
1 answer

JS animation performance with 'will-change' vs 'transformZ(0)'

I've been trying out javascript animations and noticed performance differences when I was using will-change property and transform3D() to separate animated element to a new layer for gpu rendering. It happens when I'm trying to animate scaling of…
Nikita Vasilev
  • 13
  • 3
1
vote
0 answers

Position Sticky and Will Change Transform causes scroll bar width to be added to contents in Chrome only

I'm seeing a weird issue and have spent a good bit of time trying to track it down, both through SO/blogs and finding an active issue in Chrome's bug tracker. Link: https://jsfiddle.net/Lftwqh8p/1/ Issue: This only occurs in Chrome. In JS, I have a…
Justin Warner
  • 849
  • 2
  • 10
  • 20
1
2