When opening this website https://www.sitepor500…com.br (please replace the 3 dots with just one so this link does not get any SEO juice as many of you may complain) you can see there is an image as background and an overlay of a specific pattern on top of the images at the background.
On Chrome everything works fine, however on FF I see strange patterns on the screen, like the image attached. I have my zoom set to 100% (I know using zoom different than 100% may cause this problem in any other browser because of moirè effect) and everything else on the FF is in the defaults.
So I ask you, is there any CSS property that I can set to the overlay so Firefox renders it right?
I realized this bug only happens when my WINDOWS is at 125% scale (which is the only recommended option). See the image:
2
Answers
I couldn’t repeat your issue on the 100% scaled screen. But maybe you should add
background-size: 1px 2px;
to those background image in#slideshow_fundo1
This will fix the size of
background-image
to it’s native size and prevent those scale issues.UPDATED
In your Windows Display settings, set your Scale and layout to 100%. Worked for me. Tested your issue on FF with 125% – recreated your screenshot.
this happens in firefox on windows machines when scale and layout are set to 125%. If you press ctrl shift – twice and go back to 80% in firefox it is ok. But that is rediculous.
This is not related to notebooks (in brasil) only. This happens in any windows machine using scale layout 125% on any screen size. I believe FF should fix this problem. You can use any other browser and it does not happen.
Did you report this to firefox?