Issue metadata
Sign in to add a comment
|
Border-radius with overflow hidden breaks with opacity transitions
Reported by
bren...@annable.id.au,
Dec 12 2016
|
||||||||||||||||||||||||
Issue description
Chrome Version : 57.0.2948.0 (Official Build) canary (64-bit)
54.0.2840.98 (Official Build) (64-bit)
URLs (if applicable) : http://jsbin.com/hucuhubeba/1/edit?html,output
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari: OK 10.0.1
Firefox: OK 50.0.2
IE: OK 11.0.14
What steps will reproduce the problem?
(1) Two nested elements
(2) Parent has a border-radius with overflow hidden
(3) Child has an opacity transition
What is the expected result?
The border-radius should apply throughout the animation.
What happens instead?
The moment the animation starts (on hover in this case), the border-radius property is no longer applied and the square corners appear. The border-radius is then applied again once the animation has completed.
Please provide any additional information below. Attach a screenshot if
possible.
Setting "will-change: transform" on the parent element works as a workaround.
,
Dec 13 2016
Can be same as issue 673113 . The problem reproduces with the given jsbin link on M55. Routing Blink>Animation for triage.
,
Dec 13 2016
http://jsbin.com/sanusinebo/edit?html,output shows computed style of the element maintains the border radius value as 15px, so I suspect this is a painting bug. Rerouting to Blink>Paint.
,
Dec 13 2016
Possibly related to issue 157218 .
,
Dec 14 2016
It is the same underlying issue as 157218, which was fixed then reverted. I verified that the version with 157218 fixed does fix this. Funny, checking Canary one day later would have seen it fixed, but then another day later it would be broken again. |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by nyerramilli@chromium.org
, Dec 12 2016