Category background images do not scale good for mobile

I’m guessing that you’re using an iOS device? If so, this is really only partially Discourse’s fault. iOS devices don’t respect background-attachment: fixed; which is the CSS property currently used in Discourse to give the effect of a fixed body background when you set category images.

The reason why iOS devices ignore that property is due to their concerns about the constant repaint it causes.

Here’s some examples of what I mean,

If you use a solid CSS color as the background, the only thing that gets repainted as you scroll is the scrollbar - green highlight.

So far so good. However, once you add an actual image and combine that with background-attachment: fixed; then the browser has to constantly repaint it to keep in place with every scroll.

Notice how the background gets repainted with every scroll? This is why iOS devices don’t respect that property.

Your fix is good but you’re still causing the browser to repaint the backgrounds just like the video above.

This has been on my list for a while now, but I’ll try to squeeze in a fix within the next three weeks.

If you can’t wait that long, here’s what I intend to implement and you can give that a go in your theme.

3 Likes