搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

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.
已附加屏幕截图

您需要登录才能回复。如果您还没账号,可以提出新问题