[css-backgrounds] [css-images] No way to control the clip box of a replaced element #7188
Labels
Comments
|
I would expect |
|
Hmm good point. I guess there could still be a use case for controlling the box (clip to the padding box instead for example), though for my specific use case I don't think it matters. |
|
I'm getting a bit lost with all these properties. Maybe object-overflow: visible;
overflow: clip;
overflow-clip-margin: padding-box; /* default value */ |
|
+1 to the last comment, overflow-clip-margin allows you to customize the reference box for clipping and with the conclusion we're leaning towards on the issue above it'll work. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Replaced elements clip their contents to the content box as per https://drafts.csswg.org/css-backgrounds/#corner-clipping. All browsers as expected do this correctly.
Some Firefox front-end engineers today had a use case for clipping to the padding-edge instead, and I had to say that there's no way to fix it while using
<img>, that they needed to either use CSS backgrounds or have a wrapper element.(For context, they were trying to make the corners of the background of the reload icon on hover in Firefox fully round, and the arrow would get clipped. It's effectively an image with a bit of padding and a
border-radius.)Given backgrounds have this control, perhaps replaced elements should too, even if they default to different things? Does an
object-clipproperty analogous tobackground-clipsound like a good idea, given we're adding things likeobject-view-boxetc?To be clear this is not super-urgent as workarounds exist, but it was just unfortunate that they couldn't do what they wanted to do in an obvious way.
cc @tabatkins
The text was updated successfully, but these errors were encountered: