Mobile Version Hiding Characters

[blackpearl-git]

Description

I don't know what's happening here...my page displays normally on desktops, but viewing on mobile it has issues rendering l, to the point where displaying, for instance "flix" comes across as "flx" when viewing on mobile (iOS). It's not omitting the character entirely because selecting then copying the text into another window reveals the missing letter is there.

www.pittflix.com. Strange bug. As far as I can tell, it's only affecting the "flix" in my site name, and the 2nd l in "Cloudflare", so likely related to the way the device is interpreting character spacing? But the display error is not consistent.

Probably wouldn't have even noticed if it wasn't for my site name.

homepage version

v0.9.13

Installation method

Unraid

Configuration

No response

Container Logs

No response

Browser Logs

No response

Troubleshooting

not relevant

[shamoon]

I think this came up recently but I sort of forget specifically. I think this is a font rendering thing specific to WebKit (iOS?). You could see if adjusting the letter spacing with (custom) css helps.

[blackpearl-git]

I guess I'm struggling with implementing the code. CSS is new for me.

I tried

body, html {
    letter-spacing: 6px;
}

knowing that's a wide spacing but just wanting to see whether it's implementing anything, and it's not showing any changes.

[shamoon]

You put that in your custom.css? That works fine for me:

[blackpearl-git]

It still looks fine on windows chrome & android, no issues there, but still the same display on iOS.

[shamoon]

Hmm, Im able to get it to work OK with

* {
  letter-spacing: 0.1px !important;
}

see:

But iOS does seem to aggressively cache so I had to quit safari etc.

All that said, I'm going to try something else, if you'd like to try out the dev docker image, I've added a baseline letter-spacing rule to see if it helps.

Let me know how it goes

[blackpearl-git]

Switching to dev worked! Looks totally normal now, perfect rendering & no clipping or overlaps.

There's a high probability I am missing some fundamental step that dumps the custom css into the HTML soup, but this fix on your end solved it. Thank you! Beautiful work.

[shamoon]

Awesome. Yea seems like a safe change. Barring any issues it’ll be in our next release but you’re free to stay on dev for now of course

[github-actions[bot]]

This discussion has been automatically closed because it was marked as answered. See our contributing guidelines for more details.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.