1599712 - width rendering behaviour seems abnormal for SVG image

Status: UNCONFIRMED

(Core :: SVG, defect, P3)

Description

[Simon]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

Steps to reproduce:

When adding a svg image to image tag with no width specified in the tag and width: 100% specified in css. And then wrap it with a div with margin set to auto (centering).

1. prepare html:
   <div class="img-title">
   <img src="/wp-content/uploads/bug-report.svg" class="scale-with-grid" alt="" width="" height="">
   <img src="/wp-content/uploads/bug-report.svg" class="scale-with-grid" alt="" width="" height="">
   <img src="/wp-content/uploads/bug-report.svg" class="scale-with-grid" alt="" width="" height="">
   </div>

2. prepare css:
   div {
   margin: auto;
   }
   img {
   width: 100%;
   }

prepare report-bug.svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 446.9 24.7" style="enable-background:new 0 0 446.9 24.7;" xml:space="preserve">
<style type="text/css">
.st0{font-family:'MyriadPro-Regular';}
.st1{font-size:33.3224px;}
</style>
<title>logo</title>
<text transform="matrix(1 0 0 1 0 23.2726)" class="st0 st1">FOUND SOMETHING WEIRD SVG</text>
</svg>

Actual results:

Chrome 78.0.3904.108 has the following behaviour
The image has a default width 300px instead of 100%.
If 2 same svg image place together, it reader 600px.
If 3 same svg image place together, it reader 900px. (tested up to 3 images, I think it behaves the same if adding more images)

Firefox(70.0.1) render nothing because div has no specified width and it does not obey css width of 100%.

Safari 12.1.2 render svg with width of 100%. (seems follow W3C rule)

Expected results:

render svg with width of 100% because parent have no specified width but image have been specified width of 100%

Related W3C rule:
https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

Comment 1

[BugBot [:suhaib / :marco]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Boris Chiou [:boris]]

Could you please attach a workable test file for this? e.g. one file is test.html, which includes the prepare html and prepare css you mentioned, and one file is the bug-report.svg file (assume both are in the same folder). I cannot reproduce this on my mac for now. It seems Chrome, Safari, and Firefox show the same result.

Comment 3

[Simon]

Attachment: test.html

Sorry that I have missed 1 condition.

The parent container is setup with display: flex.
I have tested in 3 browsers for comparison.

• Chrome 78.0.3904.108
• Firefox 70.0.1
• Safari Mobile(iPhone X)

The result is different in 3 browsers with different combinations.
I have marked what I have seen during the test in the html comment.

Comment 4

[Simon]

Attachment: bug-report.svg

The arbitrary svg created for testing during the finding.

Comment 5

[Simon]

Attachment: bug-report.png

The arbitrary png image for testing, comparing to svg side by side.

Comment 6

[Simon]

Attachment: bug-report.svg

The arbitrary svg created for testing during the finding.

Comment 7

[Jonathan Kew [:jfkthame]]

Attachment: another testcase

Here's a simplified testcase that looks to me like a related issue with sizing an SVG that has no inherent size; this time it's wrapped in a float. Our behavior is quite different from Safari and Chrome here.

Comment 8

[Jonathan Kew [:jfkthame]]

:jwatt, do you know if we should be using the default 300px width for the SVG image during intrinsic width computation in cases like these?

Comment 9

[Simon]

I think 300px is sensible, seems abiding by the rule. Chrome seems to take default by 300px although they have a bug of duplication, developers can expect the result without hassle. I am not sure if Safari's solution is better, it takes natural size. (I haven't dig into to it to see how it determine the natural size, maybe viewport?) If no viewport is defined, then how will it be rendered?
Maybe try more different situations can help to determine it.

I just found this occasionally in the current project.