"White space" in many page on mobile

Hi

I have a “white space” in many page only on mobile.
I have:
1200px custom layout
960px resize
768px resize
480px resize
320px custom layout

Why I have this "white space " ?



Hi @guiper, you don’t show the Sparkle canvas so it’s hard to say where the white space is intentional or not.

Anyway what’s likely to be the issue is the “Mobile autoscaling” feature in Sparkle is zooming up the 320px layout to the device size (generally 375px to 428px, depending on the device), but on iOS the text does not scale well due to a 12 year old bug that Apple hasn’t fixed, so depending on the layout it can leave some white spaces after a text block.

Unfortunately for now the only solution is to turn off mobile autoscaling for these cases. This will cause the layout to not extend to the edges of the phone, but have lateral bars.

In case anybody cares this is the relevant bug in Webkit, reported in January 2010:

https://bugs.webkit.org/show_bug.cgi?id=46987

and it briefly picked up some steam in mid 2022, but unfortunately didn’t end up being fixed anyway.

As it turns out this bug is fixed in today’s release of iOS 17!

1 Like

hi,

in your main website sparkleapp.com you have those white space (I’m using a desktop monitor)

That it actually Chrome bugs, that we had to work around. Thanks for the heads up, fixed now.