Hello,
I have encountered a recurring issue specifically with Firefox where SVG images fail to display unless a pixel-defined height attribute is explicitly set. This be… (read more)
Hello,
I have encountered a recurring issue specifically with Firefox where SVG images fail to display unless a pixel-defined height attribute is explicitly set. This behavior contrasts with other browsers, which handle SVG scaling seamlessly, typically adapting to the specified width or inheriting dimensions from parent elements.
During our website development, primarily through Elementor and leveraging Flexbox in a WordPress environment, this discrepancy becomes evident. The issue persists exclusively in Firefox, confirmed through extensive testing across various browsers and OS's with multiple SVG files and sites.
For diagnostic purposes, I recommend conducting controlled tests with SVG images embedded with our current setup. Set the SVGs to 100% width without defining their height and observe how they render in Firefox compared to other browsers. This should help ascertain whether the behavior in Firefox is anomalous.
I am assuming it may be with the way the markup of the SVG is rendered as it doesn't happen with all SVGs, however, other browsers appear to fix or override whatever is getting in the way from rendering...it is a strange issue.
I have included two images as an example. As you can see in the first image, the SVG isn't rendering (in Firefox) , but does render in Chrome/Safari. It only works when I define a height in px value on Firefox.
Please let me know if further information is required or if any specific steps need to be undertaken to address this issue.
Thank you.
