CSS border radius may not work when a positioned layer is squashed
Reported by
oliverj...@gmail.com,
Nov 6 2017
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 Steps to reproduce the problem: Example: http://jsbin.com/firabin/4/edit?html,css,output What is the expected behavior? What went wrong? The element with class `circle` should form a circle, by clipping its child content via `border-radius` and `overflow: hidden`. However, `border-radius` does not seem to be applied at all. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 61.0.3163.100 Channel: n/a OS Version: OS X 10.13.0 Flash Version:
,
Nov 8 2017
,
Nov 8 2017
,
Nov 8 2017
The SVG content seems to be the biggest issue. My guess is that we are mis-positioning the border radius clip, rather than not including it at all.
,
Nov 8 2017
Is the SVG relevant though? Replacing it with a similarly sized <div> seems to still reproduce the issue.
,
Nov 8 2017
Thanks. It is still a very interesting combination of positioning and size.
,
Nov 8 2017
,
Nov 8 2017
,
Nov 8 2017
For whatever reason we are simply not applying any border radius clip. It's not a compositing issue per-se because the clipper and the child are painted in the same layer. It does depend on squashing the clipped and content into a layer with the first non-drawn element.
,
Nov 8 2017
I'm going to use this bug next week to learn about clipping and layers because I have no idea what I'm looking at in the layer dump. Putting on hold until then.
,
Nov 8 2017
,
Nov 15 2017
|
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by ligim...@chromium.org
, Nov 6 2017