X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

All images on my website have suddenly become 'squared', but only on Firefox!

Kuphostiwe

In the last couple of weeks (roughly since the last Firefox update), all of the images on my website have changed to square aspect ration (1:1). They used to display fine but not any more, and this only happens on Firefox - other browsers display the site correctly. See attached screenshot.

It is a Joomla website with YooTheme template. You can see it here: https://eternallovestory.com

I've tried everything on the website end to fix the issue but nothing I do has any effect. Does anyone have any ideas what's gone wrong? Thanks in advance!

In the last couple of weeks (roughly since the last Firefox update), all of the images on my website have changed to square aspect ration (1:1). They used to display fine but not any more, and this only happens on Firefox - other browsers display the site correctly. See attached screenshot. It is a Joomla website with YooTheme template. You can see it here: https://eternallovestory.com I've tried everything on the website end to fix the issue but nothing I do has any effect. Does anyone have any ideas what's gone wrong? Thanks in advance!
Ama-screenshot ananyekiwe

Isisombululo esikhethiwe

You could file a bug report using the Bugzilla platform. This will go straight to the Firefox developers so that they can investigate the issue and work on any possible fixes for future versions.

If you choose to file a bug report, please post the bug ID number or a link to the bug report so that anyone who finds this support thread can track the progress of the issue.

Thanks.

Funda le mpendulo ngokuhambisana nalesi sihloko 1
Isicaphuno

Eminye Imininingwane Yohlelo

Fakela amapulagi

  • Shockwave Flash 32.0 r0

Isisebenziso

  • I-ejenti Engumsebenzisi: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Eminye Imininingwane

Wesley Branton
  • Top 10 Contributor
573 izisombululo 4884 izimpendulo
Kuphostiwe

Impendulo Ewusizo

It's something to do with the mask-size: 100% 100%; rule that you have applied to the .tm-mask-default element. Disabling that rule fixes the images in your screenshot, but does create issues on other images on your box.

It appears to be that the 100% mask-size is not determined by the size of the image, but rather the size of your mask image. Since your mask image is a square, Firefox crops it to a square.

You can change it to mask-size: cover;, but that will mean that the border doesn't appear on one size of the image. It looks like the mask-border-repeat: stretch; may eventually be introduced to address the issue, although it doesn't seem to work at the moment.

It's important to note that CSS masks are an experimental feature and my not be fully supported on all browsers. My recommendation is to exclude the mask property for now.

It's something to do with the <code>mask-size: 100% 100%;</code> rule that you have applied to the <code>.tm-mask-default</code> element. Disabling that rule fixes the images in your screenshot, but does create issues on other images on your box. It appears to be that the 100% mask-size is not determined by the size of the image, but rather the size of your mask image. Since your mask image is a square, Firefox crops it to a square. You can change it to <code>mask-size: cover;</code>, but that will mean that the border doesn't appear on one size of the image. It looks like the <code>mask-border-repeat: stretch;</code> may eventually be introduced to address the issue, although it doesn't seem to work at the moment. It's important to note that CSS masks are an experimental feature and my not be fully supported on all browsers. My recommendation is to exclude the mask property for now.

Okulungisiwe ngu Wesley Branton

Ingabe lokhu kube usizo kuwena? 1
Isicaphuno

Umnikazi wombuzo

Thank you for such a detailed dive in to the issue. Is there a way this can be escalated to the development team as if it's an experimental feature, they probably want all the real-world data they can get when a feature fails. Plus it only stopped working with the last Firefox update so it might point them toward exactly what changed to cause this bug where the previous version worked fine.

I would really like to keep the masks in place as they lend so much extra 'style' to the pages, and they work fine on every other browser (except Edge which doesn't even try to support them).

Thanks again, and please let me know if there is any way to escalate this to the dev team.

Thank you for such a detailed dive in to the issue. Is there a way this can be escalated to the development team as if it's an experimental feature, they probably want all the real-world data they can get when a feature fails. Plus it only stopped working with the last Firefox update so it might point them toward exactly what changed to cause this bug where the previous version worked fine. I would really like to keep the masks in place as they lend so much extra 'style' to the pages, and they work fine on every other browser (except Edge which doesn't even try to support them). Thanks again, and please let me know if there is any way to escalate this to the dev team.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Wesley Branton
  • Top 10 Contributor
573 izisombululo 4884 izimpendulo
Kuphostiwe

Isisombululo Esikhethiwe

You could file a bug report using the Bugzilla platform. This will go straight to the Firefox developers so that they can investigate the issue and work on any possible fixes for future versions.

If you choose to file a bug report, please post the bug ID number or a link to the bug report so that anyone who finds this support thread can track the progress of the issue.

Thanks.

You could file a bug report using [https://bugzilla.mozilla.org/enter_bug.cgi#h=dupes%7CFirefox the Bugzilla platform]. This will go straight to the Firefox developers so that they can investigate the issue and work on any possible fixes for future versions. If you choose to file a bug report, please post the bug ID number or a link to the bug report so that anyone who finds this support thread can track the progress of the issue. Thanks.
Ingabe lokhu kube usizo kuwena? 1
Isicaphuno

Umnikazi wombuzo

Done! Bugzilla report #: 1567987

https://bugzilla.mozilla.org/show_bug.cgi?id=1567987

Thanks once again for your help Wesley! Fingers crossed this gets looked at & resolved soon.

Done! Bugzilla report #: 1567987 https://bugzilla.mozilla.org/show_bug.cgi?id=1567987 Thanks once again for your help Wesley! Fingers crossed this gets looked at & resolved soon.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Jeremy Sanders
  • Top 25 Contributor
11 izisombululo 142 izimpendulo
Kuphostiwe

Archived.

Archived.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.