|Opacity transition broken when other element with "transform: rotateY" is present in DOM.|
|Reported by rod...@gmail.com, Feb 24 2014||Back to list|
UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36 Example URL: http://jsfiddle.net/a2A59/7/ Steps to reproduce the problem: 1. display an element with transform: rotateY() anywhere in the DOM. 2. try to fade in a different element using opacity transition 3. the element will not fade in, but it will jump to it's complete state after scrolling the page, or inspecting the dom with the developer tools. What is the expected behavior? The opacity element should fade in normally. What went wrong? The element doesn't fade in properly, but when the page is scrolled, or the developer tools are opened, it flashes to the final stage of the animation, or runs the animation from that point. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? Yes Chrome 32 Does this work in other browsers? Yes Chrome version: 33.0.1750.117 Channel: beta OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Shockwave Flash 12.0 r0 Tested this on: Chrome 32 Win7: OK Chrome 33 Ubuntu: OK Chrome 33 Win7: FAIL Chrome 33 Mac: FAIL The bug goes away once i remove the property transform: rotateY from all other elements on the page. This bug is also present while using jQuery Animate opacity, but i have tracked the case back to the root test case of css transition and css transform.
Feb 24 2014,
Bisect: http://build.chromium.org/f/chromium/perf/dashboard/ui/changelog_blink.html?url=/trunk&range=162740%3A162736 Further investigation shows that the bug first appeared in "Re-enable solid background color optimization for composited layers" ( http://src.chromium.org/viewvc/blink?revision=162737&view=revision ).
Mar 1 2014,
I'm seeing this exact issue as well with transform: scale and transform: translated3d on Chrome 33. The issue seems to be fixed or otherwise not there in Chrome Canary 35.
Mar 1 2014,
Thank you for reporting as well as jsfiddle test. I guess this bug was fixed in following commit. I cannot reproduce it using upstream source. commit 498a4606de7de467023bc567bbe1205b30d99613 Author: firstname.lastname@example.org <email@example.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538> Date: Wed Dec 4 01:57:28 2013 +0000 Drop "only composite opacity animations when already in compositing mode". This CL fixes a bug caused by incomplete memory optimization made in r162118. r162118 logic causes a complicated bug. When there is webkit-transform animation as well as opacity animation, and it is not in compositing mode, it is possible for Blink to handle opacity animation incorrectly, because Blink expects opacity animation is accelerated. It can be fixed, but code would be more complicated, so this CL drops this incomplete memory optimization. BUG= 324685 TEST=transitions/opacity-transform-transitions-inside-iframe.html Review URL: https://codereview.chromium.org/101623002 git-svn-id: svn://svn.chromium.org/blink/trunk@163136 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Jul 14 2014,
|► Sign in to add a comment|