Search Support

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.

Learn More

CSS element incorrect rendering

more options

The CSS element, below, is not rendered properly in the current version of FireFox for Windows. I first noticed it with the introduction of FF 89.0.

If a web page with this element is scaled, the image contained within the element does not scale. This element renders properly in other browsers (Edge, Chrome, Samsung, etc.), and the current Firefox for Android. There may be other CSS elements that use some component of this that also will not render properly, but I didn't test for them.


.pixHolder a { position: relative; display: block; background: transparent url(xxxxxx.gif) no-repeat 0 0; /* image does not scale */ border-style: hidden; height: 100px; /* size not relevant */ margin-left: 20px; z-index: 20; }

The CSS element, below, is not rendered properly in the current version of FireFox for Windows. I first noticed it with the introduction of FF 89.0. If a web page with this element is scaled, the image contained within the element does not scale. This element renders properly in other browsers (Edge, Chrome, Samsung, etc.), and the current Firefox for Android. There may be other CSS elements that use some component of this that also will not render properly, but I didn't test for them. .pixHolder a { position: relative; display: block; background: transparent url(xxxxxx.gif) no-repeat 0 0; /* image does not scale */ border-style: hidden; height: 100px; /* size not relevant */ margin-left: 20px; z-index: 20; }

Chosen solution

Thank you for the screenshots.

Do you use the "Zoom Text Only" setting? That disables proportional zooming of elements with a fixed size. You can find that on the Settings page and uncheck this box if it's checked:

Read this answer in context 👍 1

All Replies (10)

more options

Scaled using CSS or zoomed by the user?

Your shorthand background property doesn't seem to be setting a size. What if you address the properties individually for greater clarity:

background-color: transparent;
background-image: url(xxxxxx.gif);
background-repeat: no-repeat;
background-position: 0 0;  /* I assume this is the relevant property */
background-size: 100% 100%; /* stretch to fit edge to edge */

If that isn't what you meant, can you set up a demo of the problem on a site like CodePen or JSFiddle, or your own site?

more options

Thanks for your response. However, the point of my post was misunderstood. This is a Firefox for Windows problem, not a CSS one. I didn't see another way to let the FF development team know about this, so I posted here. I included the CSS element to make it convenient for anyone to write an HTML page using either a separate CSS file or setting the parameters as a Style element. As I wrote earlier, all other major browsers including FF for Android render the contents of the element correctly. The problem persists with the latest FF release. Since there is no response from the dev team, nothing is likely to be done about it, so no need to reply.

more options

Hi neil58, I sometimes file bug reports on behalf of users when I can verify them, but you didn't give me enough information.

To file a bug report yourself, use Bugzilla:

https://bugzilla.mozilla.org/

I strongly recommend providing some kind of test case demonstrating the problem and describing what steps you are referring to when you talk about scaling the page.

more options

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required) where we can test this ?

more options

JScher: thanks for the bugzilla link. I can't tell them where the problem in FF code is, but perhaps if they test this it would help them to fix it. As for "scaling" a page, I simply mean making it less than 100%. The smaller, the more obvious the problem.

Cor-el: The reason that I did NOT post a link to a generally available page is that one would have to be familiar with the image in the CSS container to easily see the problem.

I posted the CSS code as a convenience. It would take less than 5 minutes to write an HTML page in NotePad to test this problem by using a familiar jpg or gif file.

more options

When reporting a bug, you do not need to refer to parts of the code.

When I set up a demo on JSFiddle, the background image seems to be zooming up and down just fine:

https://jsfiddle.net/9vrdmch0/

I'm attaching screenshots at 100% zoom and 67% zoom.

Your Firefox doesn't do that?

more options

Not only don't I see the same thing you've posted, but what I see is even stranger. I'm not familiar with the image posting process, so if you don't see the screen shots, below, what I see is that the text content scales, but the image does not. That aspect is what I see in other pages with the CSS. I also didn't test png format files, so I don't know if that's relevant.

https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2021-06-29-11-48-04-6940ce.png

https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2021-06-29-11-48-46-f26bfe.png

I'd rather not keep going in circles about this... the fact is that prior to 89.0, this was not an issue, and it still is not an issue with any other major browser, including FF for Android.

more options

Chosen Solution

Thank you for the screenshots.

Do you use the "Zoom Text Only" setting? That disables proportional zooming of elements with a fixed size. You can find that on the Settings page and uncheck this box if it's checked:

more options

Jscher Thanks, that was the cause of the sizing issue. It must be a default setting, as I wasn't aware of its existence!

more options

Excellent. While it isn't a default setting in recent years, sometimes "stuff happens" with settings files.