width=150 is added to images

[saschanaz]

The image at https://saschanaz.github.io/media-source/#introduction gets width=150 height=150 while ReSpec itself does not add them.

https://github.com/saschanaz/media-source/blob/703174b6ec24d457eb348657f5b9db9d44f21320/media-source-respec.html#L145 is the source, why is this happening? 🤔

[sidvishnoi]

ReSpec does add it, but not in Firefox. See https://github.com/whatwg/html/issues/3510#issuecomment-369982529 ReSpec should probably make an exception for img[src$=".svg"] (not perfect, but works for most use cases).

[sidvishnoi]

(Cues Spider-Man music; ~browser bug, browser bug~ webcompat, webcompat, does whatever a browser can)

[saschanaz]

Oh, maybe this should be transferred to ReSpec? I think this is a regression since the current spec doesn't have that issue.

[saschanaz]

BTW, the SVG image does have intrinsic size which is 1500x1500, not sure why Gecko reports 0 and Blink reports 150 🤔

Okay: https://bugzilla.mozilla.org/show_bug.cgi?id=1607081 Oh actually not, it seems viewBox has nothing to do with actual width and height? 🤔

[sidvishnoi]

Code related to naturalWidth hasn't changed since the current spec was generated. Probably Chrome/Puppeteer behavior changed.. Or this has existed before but incorrect height/width were manually removed before deploy. ReSpec should either skip .svg files, or authors should add an appropriate height/width.

[saschanaz]

Adding width to SVG easily exceeds the page width because there is no max-width. I guess we want to set max-width to every image in the page, what do you think?

[marcoscaceres]

I think we should maybe remove the image sizing code from ReSpec... it's trying to be clever where it probably shouldn't be.

[r12a]

The i18n WG is also struggling with this problem. We want to insert an .svg image inline and we want to add a style of height:2rem to the img element to get the right size. In Firefox that seems to work fine, but in Chrome the width of the image is very wide.

Please remove this functionality from Respec, or at least allow us to prevent Respec adding the attributes. It doesn't seem to be appropriate at all. It prevents us using the style sheet to change the height and width of the image to match any changes to the paragraph's font size and the line-leading.

This has some urgency for us, since while adding SVG images to our document we currently have to work out and hard code fixed pixel sizes that involve both unnecessary time and problems with inflexibility going forward.

(fwiw, see also https://github.com/w3c/i18n-glossary/issues/38)