為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

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; }

被選擇的解決方法

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:

從原來的回覆中察看解決方案 👍 1

所有回覆 (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

選擇的解決方法

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.