We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Cari Bantuan

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Pelajari Lebih Lanjut

Utas ini telah diarsipkan. Silakan membuat pertanyaan baru jika Anda membutuhkan bantuan.

Scaled SVG in nested Flexbox still uses original space

  • 2 balas
  • 1 memiliki masalah ini
  • 6 kunjungan
  • Balasan terakhir oleh Leon

Leon
Leon
more options

The page I'm currently developing will contain a list of players, each shown with their profile picture. The picture will either be what the user provided or a placeholder SVG. The whole list will be a flexbox which is itself part of another flexbox.

See this fiddle: https://jsfiddle.net/Humorhose/7jfqwzd2/28/

The avatars are scaled down when the page's width is decreased. This works fine with the regular images, but not with the SVGs: Firefox does scale them, but the width they use up doesn't. Try changing the output's width and see for yourself: The SVGs will have lots of blank space to the right and below them when you decrease the width, or overlap if you increase it. When I refresh the page, everything will look as expected until you change the width again. The issue goes away when the outer flex is removed, but I need that on my site. It's also a little weird on Firefox for Android: Open https://jsfiddle.net/Humorhose/7jfqwzd2/28/show and keep switching between portrait and landscape mode. At least on my device, it works most of the time, but sometimes the bug does show up.

This doesn't happen at all in Chrome, so I think this might be a bug in Firefox.

Any solutions or is this indeed a bug?


Desktop: Firefox 91.0.2 (64 bit) on Arch Linux Mobile: Firefox for Android 91.4.0 on a OnePlus 7T Pro

The page I'm currently developing will contain a list of players, each shown with their profile picture. The picture will either be what the user provided or a placeholder SVG. The whole list will be a flexbox which is itself part of another flexbox. See this fiddle: https://jsfiddle.net/Humorhose/7jfqwzd2/28/ The avatars are scaled down when the page's width is decreased. This works fine with the regular images, but not with the SVGs: Firefox does scale them, but the width they use up doesn't. Try changing the output's width and see for yourself: The SVGs will have lots of blank space to the right and below them when you decrease the width, or overlap if you increase it. When I refresh the page, everything will look as expected until you change the width again. The issue goes away when [https://jsfiddle.net/Humorhose/7jfqwzd2/33/show the outer flex is removed], but I need that on my site. It's also a little weird on Firefox for Android: Open https://jsfiddle.net/Humorhose/7jfqwzd2/28/show and keep switching between portrait and landscape mode. At least on my device, it works most of the time, but sometimes the bug does show up. This doesn't happen at all in Chrome, so I think this might be a bug in Firefox. Any solutions or is this indeed a bug? Desktop: Firefox 91.0.2 (64 bit) on Arch Linux Mobile: Firefox for Android 91.4.0 on a OnePlus 7T Pro
Lampiran tangkapan layar

Semua Balasan (2)

TyDraniu
TyDraniu
  • Top 10 Contributor
more options

For me it looks like a bug. Can you report it on the https://bugzilla.mozilla.org/enter_bug.cgi ? Thanks.

Leon
Leon Pemilik pertanyaan
more options

Yes, I was gonna do that, but I wanted to ask here first if there might be another reason.