본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 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.