New issue
Advanced search Search tips

Issue 601440 link

Starred by 2 users
Status: Duplicate
Merged: issue 157218
Owner: ----
Closed: Apr 2016
Cc:
nyerramilli@chromium.org
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , All , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Border radius and inner opacity transition

Reported by hololelo...@gmail.com, Apr 7 2016 
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36

Example URL:
http://lelouch.ru/bugs/img_opacity/example.html

Steps to reproduce the problem:
1. Open link http://lelouch.ru/bugs/img_opacity/example.html
2. Hover your mouse on image
3. You will se that border radius of parent element is broken when opacity property works in transition

What is the expected behavior?

What went wrong?
Border radius of parent element is broken when opacity property works in transition in inner element

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 49.0.2623.110  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0

Comment 1 by nyerramilli@chromium.org, Apr 11 2016

Cc: nyerramilli@chromium.org
Labels: M-51 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Thanks for the report.

Able to reproduce this issue on Win7, Mac OS X 10.11.3, Ubuntu 14.04 using Stable 	49.0.2623.112 & Canary 52.0.2705.0

Not a regression, issue existing from M30 # 30.0.1549.0 (Official Build 208818), marking as Untriaged and requesting Dev team to look into this and update.

Comment 2 by dtapu...@chromium.org, Apr 14 2016

Components: -Blink Blink>Animation Blink>Paint

Comment 3 by supriyan...@gmail.com, Apr 14 2016 

Why

Comment 4 by pdr@chromium.org, Apr 14 2016

Labels: OS-All
Status: Available (was: Untriaged)
@hololelouch, thanks for the nice and small reproduction.

I've uploaded a jsbin version just in case the original repro goes away: http://jsbin.com/luyura.

I suspect we're missing the rounded border clip in the accelerated animation code.

Comment 5 by alancutter@chromium.org, Apr 18 2016

Components: -Blink>Animation Internals>Compositing>Animation
Is this another compositing bug similar to  issue 157218 ?

Comment 6 by ajuma@chromium.org, Apr 18 2016

Mergedinto: 157218
Status: Duplicate (was: Available)
Yes, it's the same bug: when an element with border-radius does not establish a stacking context, the border-radius isn't applied to composited descendants. A workaround is to make the the element with border-radius be a stacking context (for example, by adding 'will-change: transform' to its style; see http://output.jsbin.com/bejacotemo).
►

Sign in to add a comment