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.