Odd background rendering on web page
Here is the webpage I was seeing the issue on: https://betterwebtype.com/web-typography-book/?mc_cid=08ddb8e2ec&mc_eid=f77d07ed39
Using a 27" iMac, OS 11.3.1, FF version 88 and 88.0.1, I have seen this issue twice so far and always when the browser viewport is very wide.
Here's a link to a video of what I am seeing: https://cln.sh/0Hh2bV
Here's the enabled extensions I am running: https://cln.sh/p7EYvo
Anyone have any ideas?
All Replies (5)
Whoa, that's a mess. I can't remember seeing anything like that before.
Does it make any difference if you zoom in (hold Command, tap + a couple time) and then reload the page? That will change the effective resolution in CSS pixels, which may or may not change the style rules the site applies.
Nope. That didn't have any effect on the problem. Went up 4 or 5 clicks.
It's possible Firefox isn't completely compatible with your graphics card driver software. The typical workaround for that is to disable Firefox from using hardware acceleration. If you want to test that, this article describes where to make that change: Firefox's performance settings. This will take effect the next time you exit Firefox and start it up again. Any difference?
That did stop the crazy from happening. Also, turning off the clip-path in the inspector also had an effect on it - though probably related to the performance setting.
Thanks for that. I know what it is, but I'll leave that setting on though. Pretty strange. I've done large images like that myself before and haven't run into that mess.
Modified
Thank you for testing that. If you don't see this on many sites, it must be some very specific thing. Over time, it might be possible to spot the pattern (I mean, the pattern of contributing factors).