Join the AMA (Ask Me Anything) with Firefox leadership team to talk about Firefox priorities in 2024. Mark your calendar! Thursday, June 13, 17:00 - 19:00 UTC.

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

SVG Display Issue in Firefox Requiring Height Specification

  • 無回覆
  • 0 有這個問題
more options

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.

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.
附加的畫面擷圖

如果您還沒有帳號,您必須先登入帳號 來回覆文章。還沒有帳號的話,只能發問新問題