Where did you install Firefox from? Help Mozilla uncover 3rd party websites that offer problematic Firefox installation by taking part in our campaign. There will be swag, and you'll be featured in our blog if you manage to report at least 10 valid reports!

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

SVG Display Issue in Firefox Requiring Height Specification

  • Keine Antworten
  • 0 haben dieses Problem
  • 2 Aufrufe
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.
Angefügte Screenshots

Sie müssen sich mit Ihrem Benutzerkonto anmelden, um auf Beiträge zu antworten. Bitte stellen Sie eine neue Frage, wenn Sie noch kein Benutzerkonto haben.