1607081 - SVG image with no intrisic size returns a naturalWidth of 0

Status: NEW

(Core :: DOM: CSS Object Model, defect, P2)

Description

[Tom S [:evilpie]]

When selecting any of the headings on https://pinegrow.com/docs/how-to-guides/add-elements-to-the-page/ none of the images appear like "The Library panel.".

This seems to be caused by the onload="this.style.maxWidth=(this.naturalWidth/2)" handler receiving a naturalWidth of zero, which results in a CSS max-width of zero. Extracting this reduced test case doesn't reproduce. So I suspect this is somehow related to the lazy loading library that this webpage seems to be using.

Reported on reddit. Works in Chrome.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Reduced test-case is data:text/html,<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 0 0'%3E%3C/svg%3E" onload="this.style.maxWidth=(this.naturalWidth/2) + 'px';this.onload=null;">

Chrome ends up with a max-width of 150px... I don't know where that would come from...

Comment 2

[Boris Zbarsky [:bzbarsky]]

Do they just treat a 0-sized viewbox as if viewbox were not specified, and both as 300x150 intrinsic (like for an iframe)?

Comment 3

[Robert Longson [:longsonr]]

That image has no width or height attributes. Chrome uses fallback values of 300 x 150 as you suspected Boris.

Comment 4

[Cameron McCormack (:heycam)]

The spec says:

The IDL attributes naturalWidth and naturalHeight must return the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available, or else 0.

so I think it's correct to return 0 from naturalWidth for an SVG image with no specified size.

Comment 5

[Cameron McCormack (:heycam)]

But then again there is https://svgwg.org/specs/integration/#svg-css-sizing which says:

The resolved ‘svg’ element width, height and aspect ratio are then used in CSS sizing as intrinsic element size properties (using CSS 2.1 replaced elements size calculations).

after describing how to resolve the auto that comes from not specifying a width="" attribute.