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
1
vote
1 answer

dynamically add a value will-change on click/hover jQuery

In this article, the author states do not need permanently store style will-change css style file will-change: transform;, and should be added dynamically using javascript Аlso the author the example script: var el =…
1
vote
1 answer

css property will-change undefined behaviour

I am using semantic-ui, and have managed to narrow down some undefined behaviour in the css property will-change (I found it in their modal's): .outer{ background-color: black; position: absolute; left: 0; top: 0; right: 0; …
Isaac
  • 11,409
  • 5
  • 33
  • 45
1
vote
1 answer

will-change issue on Chrome

I noticed that when I add will-change on a fixed button (using JS), it gets really choppy. This applies to both the 'will-change' button and the button without it. Example that shows the issue: http://jsbin.com/kelajo/3/edit?html,css,js,output GIF…
ziga-miklic
  • 148
  • 1
  • 8
1
vote
1 answer

How can I measure performance gain from using will-change property

I found an interesting article about will-change property in CSS (which allows to tell the browser beforehand what will change and react proactively). The main reason behind this property is to improve the performance. As far as I understood I can…
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
0
votes
0 answers

Safari clipping the round button at the bottom

Help me solve a strange bug in Safari. Googling directs me to his irrelevant old issue. For some reason, the rounded button that is promoted to a separate layer (via will-change: transform) is cut off at the bottom as shown in the image. Perhaps…
0
votes
1 answer

CSS overflow, border-radius, mix-blend-mode, will-change : Depending on the width of the screen, the position of the element changes

I need mix-blend-mode element in my project, so I use mix-blend-mode property. It looked fine at first, but as the screen narrowed, it changed to an unexpected appearance. Also overflow: hidden doesn't work, so blue comes out of the corner. I run…
0
votes
1 answer

How to decide whether to use CSS property "will-change"

Recently I've dived into the topic of CSS animations and transitions. I'm aware of the CSS property will-change which could be used to give a hint to the browser, that the element will change in the near future (which could improve the rendering…
gru
  • 2,319
  • 6
  • 24
  • 39
0
votes
1 answer

Question about a mobile friendly alternative to using background-attachment: fixed, using pseudo element instead

I have been analyzing this code which is an alternative to using background-attachment: fixed, but have some questions that I can’t seem to figure out. I have tried to find the answers online without success. Can someone please help? The code…
WillB
  • 27
  • 2
0
votes
0 answers

optimizing performance on mobile

I'm working on this (still ongoing) project and I'm noting some bad performance on low end device, of course at the moment there are a lot of animations going on at the same time (mostly created with green sock application platform) that i can…
0
votes
2 answers

Does will-change CSS property need to be applied also while the element is changing?

I'm trying to make use of the CSS will-change property instead of the translateZ(0) hack. I understand that the property needs to be applied before the element changes. But my doubt is if it needs to be applied also while it is changing. I'm…
Alvaro
  • 9,247
  • 8
  • 49
  • 76
0
votes
1 answer

Is there a benefit to using "will-change" on the HTML5 video element?

Is there any benefit on using the will-change property on an html video tag to increase performance ? if so, how should i use it in order to make the video run on the GPU using Hardware Acceleration ?
Roee Yossef
  • 455
  • 5
  • 16
0
votes
1 answer

will-change css usage on transition

i am trying to use will-change to make an animation perform better. I have a page-container that would animate left and padding-right in order to move and reveal side menu. .page-container { background: #f4f4f4; height: 100%; left: 0; …
user4675957
  • 233
  • 2
  • 3
  • 12
0
votes
3 answers

Clearing will-change CSS property

What is the correct value for 'clearing' the will-change CSS property? I tried using 'auto', but according to Chrome Dev Tools (in both the current version of Chrome (46), and Canary (48)) that's an invalid property value.
user1816877
0
votes
0 answers

will-change: opacity, transform; causes smoothed text in CSS

so I was messing about with MaterializeCSS and was realizing that when putting a button with the class "waves-effect" caused all text to smooth out and become a little blurry sort of say. So through a process of elimination, I found out that…
Sanction
  • 179
  • 1
  • 2
  • 10
1
2