Issue metadata
Sign in to add a comment
|
Background-size transitions no longer working
Reported by
shom...@gmail.com,
May 31 2016
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36 Example URL: http://stackoverflow.com/questions/37545089/background-size-transitions-in-chrome-51-a-bug-or-a-feature Steps to reproduce the problem: 1. Set the background-size transition to an element 2. Set the appropriate sizes for normal and hover states 3. No transition happens on hover What is the expected behavior? The transition should happen, like on previous versions 50- What went wrong? The CSS transition doesn't work anymore Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? Yes On version 50 and earlier Does this work in other browsers? Yes Chrome version: 51.0.2704.63 Channel: stable OS Version: Ubuntu 16.04 Flash Version: Shockwave Flash 21.0 r0
,
May 31 2016
testcase: https://jsfiddle.net/3k7dwwag/ Mouseover on both of the images should behave the same (animate the size).
,
Jun 1 2016
-webkit-background-size is not exactly the same as background-size as setting a single value on background-size defaults the other to 'auto' while on -webkit-backgruond-size the other defaults to the same value as the first.
,
Jun 1 2016
Updated test case to use two values for background-size: https://jsfiddle.net/3k7dwwag/1/ Both divs transition now. As described by the background-size spec keywords such as auto are not animatable. https://drafts.csswg.org/css-backgrounds-3/#the-background-size This change in behaviour would have been due to this patch: https://codereview.chromium.org/1732323003 I'll leave the Needs-Bisect label on as a double check. Unfortunately we seem to be in an awkward position of complying with spec but differ from other browsers.
,
Jun 1 2016
Able to reproduce on Windows 7, Ubuntu 14.04 and Mac OS 10.11.4 using chrome stable M51-51.0.2704.63. Bisect Information: ===================== Good build: 51.0.2688.0 Bad Build : 51.0.2690.0 Change Log URL: https://chromium.googlesource.com/chromium/src/+log/01f2c6054da240a5eca0414c4fcf11f257e60e2a..4d344058522e01d85162fcd1a9e5f4b747db9383 From the above change log suspecting below change Review URL: https://codereview.chromium.org/1732323003 Unable to assign directly to the author(abhishek.ka)of the file, So assigning to the reviewer for further updates. alancutter@ - Could you please look in to this issue, if not please help us in assigning it to the right owner. Thanks!
,
Jun 1 2016
,
Jun 1 2016
,
Jun 1 2016
Filed spec bug to match existing browser behaviour: https://github.com/w3c/csswg-drafts/issues/158
,
Jun 1 2016
Submitted patch to allow transitions if keywords match: https://codereview.chromium.org/2027933002
,
Jun 3 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a commit 8793a7bac4d2d56e38c8bd406920128e1ceb7a9a Author: alancutter <alancutter@chromium.org> Date: Fri Jun 03 08:12:06 2016 Allow transitions on background-size with positionally matched keywords This change allows CSS transitions to interpolate between lists with matching keywords. This affects interpolation for the following properties: - border-image-width This property is not animatable according to spec: https://drafts.csswg.org/css-backgrounds-3/#the-border-image-width - background-size Values are now interpolable if their keywords are positionally matched: https://github.com/w3c/csswg-drafts/commit/a5f9de921fa7834c79ee15660d9d86528bce1607 - -webkit-background-size - -webkit-mask-size These mirror the animation behaviour of background-size. This change only affects CSS Transitions for the sake of a small mergable patch. CSS Animations behaviour will be brought in line in a separate patch. This change ensures we have compatible behaviour with other browsers for transitioning between single length background-size values e.g. "background-size: 50%" to "background-size: 100%" BUG= 616072 Review-Url: https://codereview.chromium.org/2027933002 Cr-Commit-Position: refs/heads/master@{#397661} [add] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation-expected.txt [modify] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation.html [modify] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation-expected.txt [modify] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation.html [add] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation-expected.txt [modify] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation.html [add] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation-expected.txt [modify] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html [modify] https://crrev.com/8793a7bac4d2d56e38c8bd406920128e1ceb7a9a/third_party/WebKit/Source/core/animation/animatable/AnimatableUnknown.h
,
Jun 5 2016
,
Jun 6 2016
[Automated comment] Request affecting a post-stable build (M51), manual review required.
,
Jun 6 2016
Your change meets the bar and is auto-approved for M52 (branch: 2743)
,
Jun 6 2016
[Automated comment] Request affecting a post-stable build (M51), manual review required.
,
Jun 6 2016
It looks like this has lived on canary for a few days, do things look good with this patch? How safe is this code change to merge into post-stable M51?
,
Jun 6 2016
Please merge your change to M52 branch 2743 before 3:00 PM PST tomorrow, Tuesday (06/07) so we can take it for this week beta release. Thank you.
,
Jun 7 2016
I consider this change to be relatively safe. There is one checked static_cast and a pointer dereference that's asserted to be non-null in the constructor.
,
Jun 7 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e5c3fe4746fd236500b670d6d6d99a6753a25772 commit e5c3fe4746fd236500b670d6d6d99a6753a25772 Author: Alan Cutter <alancutter@chromium.org> Date: Tue Jun 07 07:19:40 2016 Allow transitions on background-size with positionally matched keywords This change allows CSS transitions to interpolate between lists with matching keywords. This affects interpolation for the following properties: - border-image-width This property is not animatable according to spec: https://drafts.csswg.org/css-backgrounds-3/#the-border-image-width - background-size Values are now interpolable if their keywords are positionally matched: https://github.com/w3c/csswg-drafts/commit/a5f9de921fa7834c79ee15660d9d86528bce1607 - -webkit-background-size - -webkit-mask-size These mirror the animation behaviour of background-size. This change only affects CSS Transitions for the sake of a small mergable patch. CSS Animations behaviour will be brought in line in a separate patch. This change ensures we have compatible behaviour with other browsers for transitioning between single length background-size values e.g. "background-size: 50%" to "background-size: 100%" BUG= 616072 Review-Url: https://codereview.chromium.org/2027933002 Cr-Commit-Position: refs/heads/master@{#397661} (cherry picked from commit 8793a7bac4d2d56e38c8bd406920128e1ceb7a9a) Review URL: https://codereview.chromium.org/2042993002 . Cr-Commit-Position: refs/branch-heads/2743@{#257} Cr-Branched-From: 2b3ae3b8090361f8af5a611712fc1a5ab2de53cb-refs/heads/master@{#394939} [add] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation.html [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation.html [add] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation.html [add] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/Source/core/animation/animatable/AnimatableUnknown.h
,
Jun 7 2016
Tested the same on win8.1,mac 10.11 and Linux 14.04 chrome version 53.0.2761.2 - Mouseover on both of the images behaves the similar in animating the size. Hence adding TE-Verified labels. Please find the screencast
,
Jun 8 2016
Verified the issue on Windows 7, Ubuntu 14.04 and Mac OS 10.11.5 using chrome latest M52-52.0.2743.33 and observed the css transition works fine on both the images as expected. Hence adding TE-Verified label.
,
Jun 8 2016
I don't see any other reports for this regression, perhaps it's not necessary to merge into stable...
,
Jun 9 2016
Please remove the merge request if we don't want this on stable anymore. Thank you!
,
Jun 10 2016
,
Jun 15 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e5c3fe4746fd236500b670d6d6d99a6753a25772 commit e5c3fe4746fd236500b670d6d6d99a6753a25772 Author: Alan Cutter <alancutter@chromium.org> Date: Tue Jun 07 07:19:40 2016 Allow transitions on background-size with positionally matched keywords This change allows CSS transitions to interpolate between lists with matching keywords. This affects interpolation for the following properties: - border-image-width This property is not animatable according to spec: https://drafts.csswg.org/css-backgrounds-3/#the-border-image-width - background-size Values are now interpolable if their keywords are positionally matched: https://github.com/w3c/csswg-drafts/commit/a5f9de921fa7834c79ee15660d9d86528bce1607 - -webkit-background-size - -webkit-mask-size These mirror the animation behaviour of background-size. This change only affects CSS Transitions for the sake of a small mergable patch. CSS Animations behaviour will be brought in line in a separate patch. This change ensures we have compatible behaviour with other browsers for transitioning between single length background-size values e.g. "background-size: 50%" to "background-size: 100%" BUG= 616072 Review-Url: https://codereview.chromium.org/2027933002 Cr-Commit-Position: refs/heads/master@{#397661} (cherry picked from commit 8793a7bac4d2d56e38c8bd406920128e1ceb7a9a) Review URL: https://codereview.chromium.org/2042993002 . Cr-Commit-Position: refs/branch-heads/2743@{#257} Cr-Branched-From: 2b3ae3b8090361f8af5a611712fc1a5ab2de53cb-refs/heads/master@{#394939} [add] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation.html [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation.html [add] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation.html [add] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation-expected.txt [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html [modify] https://crrev.com/e5c3fe4746fd236500b670d6d6d99a6753a25772/third_party/WebKit/Source/core/animation/animatable/AnimatableUnknown.h
,
Jun 15 2016
Issue 620072 has been merged into this issue.
,
Jun 15 2016
Seeing more reports of this regression in the wild, I think given the small patch to fix it it's worth merging into stable.
,
Jun 15 2016
[Automated comment] Request affecting a post-stable build (M51), manual review required.
,
Jun 28 2016
This is not "fixed"... http://codepen.io/vsync/pen/ZOeKNj I've just made this demo on version 51.0.2704.103 m
,
Jun 28 2016
This is fixed, but the fix had not landed on the stable channel. So Chrome 52 has the fix. If the merge into Chrome 51 is approved, you will see a stable build with the fix.
,
Aug 23 2016
This issue is not fixed. In all other browsers my Background-size transitions work fine. I scale the image up or down and it works perfectly. But in Chrome it does not work. Please help!
,
Aug 23 2016
#30 - Are you using Chrome 52? Can you share a URL that shows that it is not working?
,
Aug 23 2016
1. Resize your browser to approx. 1366x768 2. Go to http://www.clear-reports.com * The animation at the top is fade in, then zoom. * It works in Chrome <= 50. * It does not work in Chrome >= 51 and looks terrible.
,
Aug 23 2016
Are you transitioning background-size? I see a background-position animation. Can you point me to where background-size is specified to transition?
,
Aug 23 2016
Again this works in Chrome <= 50, but does not work in Chrome >= 51.
******
Here is my animation for 1366x768:
@keyframes animatedBackground1366 {
0% { opacity: 0.0; background-position: 0px 0px; background-size: 100%; }
20% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
50% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
100% { opacity: 1.0; background-position: -577px -769px; background-color: #debc97; background-size: 200%; }
}
@-moz-keyframes animatedBackground1366 {
0% { opacity: 0.0; background-position: 0px 0px; background-size: 100%; }
20% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
50% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
100% { opacity: 1.0; background-position: -577px -769px; background-color: #debc97; background-size: 200%; }
}
@-webkit-keyframes animatedBackground1366 {
0% { opacity: 0.0; background-position: 0px 0px; background-size: 100%; }
20% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
50% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
100% { opacity: 1.0; background-position: -577px -769px; background-color: #debc97; background-size: 200%; }
}
@-ms-keyframes animatedBackground1366 {
0% { opacity: 0.0; background-position: 0px 0px; background-size: 100%; }
20% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
50% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
100% { opacity: 1.0; background-position: -577px -769px; background-color: #debc97; background-size: 200%; }
}
@-o-keyframes animatedBackground1366 {
0% { opacity: 0.0; background-position: 0px 0px; background-size: 100%; }
20% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
50% { opacity: 1.0; background-position: 0px 0px; background-size: 100%; }
100% { opacity: 1.0; background-position: -577px -769px; background-color: #debc97; background-size: 200%; }
}
.loaded .crHeaderRow {
background-position: 0px 0px;
background-size: 100%;
animation: animatedBackground1366 5s ease 1s 1 normal forwards;
-moz-animation: animatedBackground1366 5s ease 1s 1 normal forwards;
-webkit-animation: animatedBackground1366 5s ease 1s 1 normal forwards;
-ms-animation: animatedBackground1366 5s ease 1s 1 normal forwards;
-o-animation: animatedBackground1366 5s ease 1s 1 normal forwards;
}
From: http://www.clear-reports.com/wordpress/wp-content/themes/startuply/css/clear-reports-custom.css?ver=1471955893
,
Aug 23 2016
Looks like this is only fixed for transitions. Can you file a new issue for animations? I guess this is a small reprocution https://jsfiddle.net/d6xnjxxs/ - but do other browsers animate it correctly?
,
Aug 24 2016
Thanks for the report and investigation. This is technically separate to the original CSS transitions bug and is not regressed by the same patch (https://codereview.chromium.org/1732323003). Raised separate issue for CSS Animations of background-size: https://crbug.com/640450 |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by dtapu...@chromium.org
, May 31 2016