Letter Spacing on Hover causes Visual Glitching
This is actually for a different website that has some semi unique css/html, but I was able to recreate the problem in a codepen with some specific rules.
https://codepen.io/rainbow_blacklight/pen/mdGKyag
Here's a video of the error; warning for photosensitive viewers.
https://imgur.com/2QBfqCF
I'm wondering if its possible to prevent this from happening while still utilizing letter spacing expansion on hover. Moving the link to the next line or using smaller letter spacing isn't the kind of fix I'm looking for, because I'm making code that other people will use, and they don't know to do those things when adding in their html.
3 Replies
If you're resizing an element on hover this feedback loop can easily happen since the element will automatically push itself under and away from your cursor, causing it to be hovered and unhovered continuously.
I don't really see a fix for that. That'a just the nature of size changes on hover
It does sound like an awful user experience too. You try to select something and the content just disappears
Also by your own trigger warning:
warning for photosensitive viewers.you're likely to cause an A11Y nightmare for some users. In addition that text becomes much harder to read with that much letter spacing. AND you're causing reflow and trigger layout which can be vastly "expensive" for the browser to recalculate everything following that link's container as it height is changing (or you need to control containment) You have no control over what fonts people are using (or blocking) so whatever magic numbers you might come up with, they will fail on some devices and for your visitors. There are many other less harmful means to highlight links on :hover or :focus
Hmm, discord threads you make dont send you notifications. the more you know.
Thank you guys for your responses! I will be using different hover and focus techniques in the future for the most part to avoid this issue. I suppose theres a good reason i only ever see this on personal sites and not on professional sites, haha