New issue
Advanced search Search tips

Issue 346237 link

Starred by 6 users

Issue metadata

Status: Duplicate
Merged: issue 324685
Owner: ----
Closed: Jul 2014
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug-Regression

Sign in to add a comment

Opacity transition broken when other element with "transform: rotateY" is present in DOM.

Reported by, Feb 24 2014

Issue description

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:

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.

Comment 1 by, Feb 24 2014

Labels: -Type-Bug Type-Bug-Regression Cr-Blink-Compositing Cr-Blink-Animation
Status: Available

Further investigation shows that the bug first appeared in "Re-enable solid background color optimization for composited layers" ( ).

Comment 2 by, 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.
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: <>
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 
    Review URL:
    git-svn-id: svn:// bbb929c8-8fbe-4397-9dbb-9b2b20218538

Mergedinto: 324685
Status: Duplicate

Sign in to add a comment