4 ms·
I recently implemented a site with a feature similar to the spinning-globe in the International section[1]: a video element overlapped by text in an adjacent el
by saidajigumi 12y ago
I recently implemented a site with a feature similar to the spinning-globe in the International section[1]: a video element overlapped by text in an adjacent element. I ran into a vexing problem in some browsers where the the text that intersected the video appeared somewhat degraded, as if it were a lighter weight than what was actually specified. In Firefox, only the text directly overlapping the video was affected. But in Safari all text in the entire intersecting div showed this effect, even that not over the video. AFAICT, this is some kind of compositor bug, but I haven't been able to dig up any decent information about it.
I do note that Stripe's page isn't exhibiting this issue, but don't see anything that appears to be a workaround or otherwise unconventional.
Anyone have any color on this? Is this a font-specific rendering issue, e.g. so Stripe's fonts don't exhibit this problem? Or perhaps the presence of a background image on the li tags forces the compositor to behave? TIA!
[1] https://stripe.com/connect#international https://stripe.com/connect#international
- sudhirj 12y agoUsually happens when the text is above a section of the page that's being hardware accelerated. The browser basically rasterizes the text, which changes the aliasing properties. Either move the text off to a separate sister div, or move the animation to a div with a higher z-index. Or you can set -webkit-font-smoothing: anti-aliased - that will set all of the text to same antialiasing settings as GPU accelerated text.