I am running a page that utilizes an off-canvas design pattern for the main menu on small screens. Using progressive enhancement, I use CSS transformations instead of position absolute to show/hide the menu when the broswer supports it.

I just noticed that the CSS transformations cause the text to be blurry, especially in Safari. It seems like there is not a real fix for that, only workarounds I don't want to use, especially because the text is still a bit blurry, even after some trickery.

So now I have to decide:

Ditch the CSS transformations and always use position absolute – this has a noticeable impact on performance during the slide-in/slide-out animation phase, but the text is always rendered sharp.

Ditch CSS transformations and transitions – sharp text and a not so noticeable performance loss, but the menu just shows/hides without animation -> bad for experience

Leave everything like it is and present some users blurry text.

My instinct tells me that I should use option 2, while option 1 could be a compromise since the performance loss is not noticeable on all devices.

I am probably not the first one that runs into such a decision, so it would be nice to know what the best (maybe even "standard"?) solution for this problem would be.

1 Answer
1

I can't really know how "bad" the performance is, but understand both hardware and software (mobile browser graphics rendering) are both rapidly improving. Phones and tablets is where the money is (as opposed to desktops) in hardware market, so that's where the performance arms race is. My point is your options #1's performance problem will be less of a performance problem as time goes by.

In any case I think I'd go with option #1 but code it in a way that make it easy to plug in alternates in the future. iOS Safari may get fixed in this respect and widely deployed.

(And I feel you pain with font rendering on various devices, it sure is a pain to get it right.)