[csswg-drafts] [css-backgrounds] [css-images] No way to control the clip box of a replaced element (#7188)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds] [css-images] No way to control the clip box of a replaced element ==
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](https://crisal.io/tmp/img-radii.html).

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-clip` property analogous to `background-clip` sound like a good idea, given we're adding things like `object-view-box` etc?

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 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7188 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 31 March 2022 19:46:15 UTC