Hacker News Reader

Comment by ozten | Hacker News Reader

The amount of prose with strike-through made this unreadable for me. Safari iOS

Update: Looking at Firefox on Desktop, everything underlined in the article looked like Strike-through on my phone. Weird.

View on HN

For some reason, they've gone to considerable trouble to avoid using CSS text-decoration to underline their links - which could be expected to work pretty well everywhere - and instead implemented custom "underlining" using an SVG background-image. I guess Safari on iOS doesn't position the background quite how they expected.

Designers: when you're tempted to do something like this, presumably because you think you know better than the browser precisely what an underline should look like... just don't.

I think they do that to avoid that thing were Chrome/Safari/etc do not draw the underline where the letters are: https://thepracticaldev.s3.amazonaws.com/i/er57ioliwktkhzeq7... (they want it to look like Firefox does in this screenshot but on all browsers)

It's funny because, back when Safari had just launched this, designers went crazy with ways of emulating it for those who didn't have Safari. Now they do the opposite. Designers are a plague on earth.

As hideous as the Chrome and Safari examples look, that's not a decision a website should be making, or allowed to make.

> Designers are a plague on earth.

There's a CSS feature for that, actually:

    text-decoration-skip-ink: none;

Admittedly, not all browsers support it yet, but that's what websites should be using if they want to override the default behavior.

Odd, I can't see anything that would cause you to see that. Safari on macOS and Chrome on Android render it fine.

So does iOS for me, 13.2.3.

Reply on news.ycombinator.com