tomanistor/osprey

link underlines not showing on chrome

mkhezr opened this issue · 2 comments

mkhezr commented

Hi Toma,

I am using your theme for my website which I'm hosting on github pages. When viewing the website locally I can see the link underlines which I understand is created using a combination of a background image and text shadow. The strange thing is that the underlines do not show up on chrome when I view the online version of my website. They show fine on Safari and on my iphone. They also show fine when I view my website on chrome locally.

If you visit "Future of Work" post on my website for example and search for "Whitebox Consulting", that should be a link. If you hover over it, it'll get highlighted. But the underline should not show up if you are viewing on chrome. I'm using the most recent version of chorme : 68.0.3440.106

So I started inspecting and figured out that if I change the .content a css and instead of background-size: 1px 2px I set it to background-size: 2px 3px then the underline starts showing up! It seems like the image has been too small and 1 pixel has been lost somewhere.

Do you have any idea why this is happening?

mkhezr commented

I figured that the underline was not showing because the page was zoomed out to 90%.

tomanistor commented

Hey @mkhezr, thanks for figuring that out!

I thought the issue might have been related to Chrome, which recently implemented a style change with underlined words. Since Chrome 64, the browser creates the same "ink skipping" effect by default as I have done with the links of this themes. https://superuser.com/questions/1293529/when-did-chrome-start-underlining-links-differently

I've noticed that this may sometimes mess with the theme's link underlines on Chrome at different resolutions.