iOS Rendering

[ReignOfComputer]

Hi, just wondering if the page titles are rendering correctly on iOS/WebKit based devices? Seems the title font (mctit) doesn't render correctly when I try it out.

Edit: I played around the CSS and found that removing the transform the webkit variants from the h1 css fixes this issue. Webkit always has such weird quirks with fonts, sigh.

[JulianPrieber]

@lastsamurai26 could you look into this?

[lastsamurai26]

Sure

@ReignOfComputer
Are you using our latest LCC version and the latest theme version ?

Can you please tell me which Apple OS you are using ?

I'm currently running MacOS Ventura and iOS 16.2 on Safari.

All browsers are already covered in the code.
It may be that in the meantime the order no longer fits because Safari on Apple
-webkit-transform is no longer needed and we have to move it to another place.

This is the code from the theme itself

    -webkit-transform: perspective(300px) rotateX(15deg);
    -moz-transform: perspective(300px) rotateX(15deg);
    -ms-transform: perspective(300px) rotateX(15deg);
    -o-transform: perspective(300px) rotateX(15deg);
    transform: perspective(300px) rotateX(15deg);

can you show me as a picture what exactly does not fit.
Have the theme installed me times and can only determine that the headline takes a while to create

[ReignOfComputer]

I'm using the latest downloadable LLC version from the llc-themes repo.

I just setup a fresh install, which can be found at: https://links-staging.reignofcomputer.com/

Desktop View

iOS Edge

iOS Safari

[lastsamurai26]

ok, I could reproduce the problem in the meantime, but when removing -webkit- from the code, the theme is still not displayed correctly, which can have different causes. What makes me wonder is that the error occurs under Safari 15.6.1 but under 16.1 it is sometimes there and sometimes not.

Can you install Chrome under ios and MacOS?
Edge should not have the error because this is based on Chromium does.
Both Chrome and Edge use the same engine.
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 Edg/108.0.1462.54
so the error should be present under Chrome and also Edge and not only edge and safari under Mac or iOS

Which version do you use ?

[ReignOfComputer]

AFAIK, all iOS browsers are Safari, regardless of what they call themselves.

FWIW, issue is still present on Chrome iOS.

My fix was to remove the non-browser specific transform:. Not ideal, but it got the title to render.

[lastsamurai26]

I looked at this again, but unfortunately I can't get the font to display despite deleting the non-browser specific settings.

-webkit
-ms etc I have removed

Which makes me wonder why we didn't notice the error before.

I have installed Chrome on the Ipad and on the Iphone and I can not reproduce this error there.
only under Safari.
@JulianPrieber can you reproduce that under Safari the font appears briefly and then disappears again ?

Bildschirmaufnahme.2022-12-29.um.09.43.31.mp4

[ReignOfComputer]

Hmm, no luck on this?

[lastsamurai26]

not yet, get do you a Solution?

i tried many things

[ReignOfComputer]

As before, my workaround is to change:

    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(300px) rotateX(15deg);
    -moz-transform: perspective(300px) rotateX(15deg);
    -ms-transform: perspective(300px) rotateX(15deg);
    -o-transform: perspective(300px) rotateX(15deg);
    transform: perspective(300px) rotateX(15deg);

to:

    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -moz-transform: perspective(300px) rotateX(15deg);
    -ms-transform: perspective(300px) rotateX(15deg);
    -o-transform: perspective(300px) rotateX(15deg);

Not ideal, and perhaps one could do some Javascript to check if the browser is NOT Webkit and add back the generic transform styles, but this is good enough for me.