New issue
Advanced search Search tips

Issue 640450 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Sep 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

CSS Animation of background-size doesn't work with keywords

Project Member Reported by alancutter@chromium.org, Aug 24 2016

Issue description

The following should animate in CSS Animations.
@keyframes test {
  from { background-size: 50%; }
  to { background-size: 100%; }
}

We currently don't animate it due to the implicit "auto" keyword.
See syntax for background-size: https://drafts.csswg.org/css-backgrounds-3/#the-background-size

The spec has recently changed to allow keywords in animations so we should follow suit.

Test case: https://jsfiddle.net/d6xnjxxs/

Forked from  issue 616072 .
 
Thanks Alan.

How long does it usually take on average for something like this to be fixed? 

We have loads of websites out in the wild with stuttering animations (instead of smooth ones as per Chrome <= 50)

I'm just wondering if we will need to re-code them. Fingers crossed this can be fixed soon!
Sorry to hear this is affecting you so. I have a fix in review though it will be months before it reaches stable Chrome.
I recommend replacing "background-size: 50%" with "background-size: 50% 50%" as a workaround in the mean time. Example: https://jsfiddle.net/d6xnjxxs/1/
Project Member

Comment 3 by bugdroid1@chromium.org, Sep 8 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/07b28f4faed3dba2c80a864a61e8af46bdf5d50a

commit 07b28f4faed3dba2c80a864a61e8af46bdf5d50a
Author: alancutter <alancutter@chromium.org>
Date: Thu Sep 08 00:41:55 2016

Allow interpolation of background-size values with keywords in CSS Animations

This change allows for positionally matched keywords in background-size CSS
Animations. This brings it in line with CSS Transitions behaviour.

Previously CSSSizeListInterpolationType inherited from CSSLengthListInterpolationType,
due to the handling of keywords this is no longer suitable.

BUG= 640450 

Review-Url: https://codereview.chromium.org/2280553002
Cr-Commit-Position: refs/heads/master@{#417134}

[modify] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/LayoutTests/animations/composition/background-size-composition.html
[delete] https://crrev.com/dc48857294abdcc3222dad7464c2f50b36b9b4ca/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation-expected.txt
[modify] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation.html
[delete] https://crrev.com/dc48857294abdcc3222dad7464c2f50b36b9b4ca/third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation-expected.txt
[delete] https://crrev.com/dc48857294abdcc3222dad7464c2f50b36b9b4ca/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation-expected.txt
[modify] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/BUILD.gn
[add] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/CSSSizeListInterpolationType.cpp
[modify] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/CSSSizeListInterpolationType.h
[modify] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/LengthListPropertyFunctions.cpp
[add] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/SizeInterpolationFunctions.cpp
[add] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/SizeInterpolationFunctions.h
[add] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/SizeListPropertyFunctions.cpp
[add] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/animation/SizeListPropertyFunctions.h
[modify] https://crrev.com/07b28f4faed3dba2c80a864a61e8af46bdf5d50a/third_party/WebKit/Source/core/style/FillLayer.h

Status: Fixed (was: Assigned)

Sign in to add a comment