Links not underlined when zoomed out in Chrome

[kejadlen]

Just FYI, I browse the web at 90% by default, and the links don't show up in Chrome. They show up at 100+% and seem to work fine in Firefox/Safari, though.

[daveliepmann]

Confirmed—thanks for the report. Strange.

[adamschwartz]

One option is to only apply our custom underline CSS when a browser zoom of 1 is detected:

Detection can be done with something like this:

var getBrowserZoom = function() {
  return window.outerWidth / (document.body.clientWidth + parseInt(getComputedStyle(document.body)['margin-left'], 10) + parseInt(getComputedStyle(document.body)['margin-left'], 10))
};

document.documentElement.setAttribute('data-browser-zoom', getBrowserZoom());

Then these lines would be prefixed with html[data-browser-zoom="1"]:

html[data-browser-zoom="1"] a:link {
  /* ... */
}

[daveliepmann]

As Tufte CSS is a pure-CSS project, a JavaScript solution is not in-scope for this project. I like Adam's JS trick and it's a good answer for this problem in general, but we'll need to find a different answer within the context of "base" Tufte CSS.

Might it be possible to switch all the px declarations within a:link to em? Or would that lead to other problems?

[adamschwartz]

Definitely worth a shot!

[paul90]

An alternative might be to add to the existing webkit media query, to allow for how webkit does sub-pixel rounding, something like:

@media screen and (-webkit-min-device-pixel-ratio: 0) { a:link { background-size: 0.05em 1px, 0.05em 1px, 2px 1.5px; background-position-y: 87%, 87%, 87%; } }

Or to use to top in the linear-gradient, something like:

a:link { background: linear-gradient(to top, transparent 1px, #333 1px, transparent 2px);
...}

and remove all the other background-* properties. Though this will also likely need to go into a media query so that the stops can be tailored for the different browser behaviours.

[juliuso]

Likely an old Chrome bug that was fixed in previous releases. Links work fine at 90% on Chrome 74.0.3729.131. Issue should be safe to close.

[daveliepmann]

Thanks for the report! I was able to replicate the OK behavior so closing.