Jump to content

Text pixelated on Scrolling - Mobile only

Recommended Posts

  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

it's not pixelated, what's happening here is that the marquee block lays out three copies of your text so that it can move them around to give the idea of a continuous ticker tape. in your mobile version those three are laid out on top of each other. it looks like it's only the S that's affected because an S has non-right angles and so it's more pronounced. in fact, if you look more closely, everything looks "fatter" on the other letters, the bend of the U is actually pointed etc.

Why is this happening? I'd say it's a bug... essentially as far as I can tell what's going on is that its incorrectly measuring the size as 0 and so its offsetting its three copies by 0 + your item spacing. 

I can't be sure why that's happening on mobile only though, but it's possible that it's because it's loading up the custom font and it's not ready in time to be measured. (if you do it on mobile emulation within chrome it's fine).

What you could do is drop your item spacing to zero in your scrolling section's properties and then if the bug happens it should overlay all three copies directly on top of each other and remove the effect.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.