1548210 - CSS Image rendering issue

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Remo]

Attachment: Screen Shot 2019-05-01 at 17.31.38.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

I'm trying to display a HTML image with border-radius: 50%, but with empty url. Like this:

Actual results:

There is a black line display around image.

Expected results:

It shouldn't display the black line.

Comment 1

[Liviu Seplecan]

Hi @Remo, In a 1st way - I guess this isn't a bug.
Some clarifications about you've described: those lines around the image are displayed because the property be it "border..." or radius...etc is still a property and this being applied to an element will be interpreted. The system will allocate space for your element/s having properties (for example: width, height etc).
If you want to be blank you must let only the element: "img" / "src" without any property.
However, I have several questions: This action described, can be made on any other browser and works as you said? or did you try this in the past on Firefox = it works and now don't?
Thanks for your contribution.

Comment 2

[Remo]

Hi @Liviu, Thank you for replying this.

I test it in Chrome, Firefox and Safari and only Chrome works fine, which means there are no black line display.

I'm not sure how Firefox render html image tag. The quick fix for me is always using a placeholder image.

But I think this could affect user experience if the image url are dead.

Comment 3

[Liviu Seplecan]

Ok, I understand, then I will set a component to it and let someone from dev team to handle it if it's really an issue. Thanks.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

This is invalid, if you remove the border radius you can see that the line comes from the border of the broken image. You can copy the following URL to check:

data:text/html,<img src="" alt="" style="height:100px;width:100px;background-color:transparent">

You can add a padding of 1px to the image to make the border radius clip it:

data:text/html,<img src="" alt="" style="height:100px;width:100px;background-color:transparent;padding: 1px;box-sizing: border-box;border-radius:50%;">

Though that doesn't seem to be interoperable, as Chromium-based browsers don't honor the border-radius at all looks like.

Comment 5

[Remo]

I don't think the padding of 1px will fix this issue. You can check this in Firefox.

https://codepen.io/remocode/pen/KLmJLY