New issue
Advanced search Search tips
Starred by 6 users
Status: Duplicate
Merged: issue 324685
Owner: ----
Closed: Jul 2014
Cc:
Components:
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 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.
 
Comment 1 by ande...@opera.com, Feb 24 2014
Cc: dongseon...@intel.com
Labels: -Type-Bug Type-Bug-Regression Cr-Blink-Compositing Cr-Blink-Animation
Status: Available
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 ).
Comment 2 by anrk...@gmail.com, 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: dongseong.hwang@intel.com <dongseong.hwang@intel.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

Mergedinto: 324685
Status: Duplicate
Sign in to add a comment