open-props/normalize renders text-underline-offset differently across browsers

[cdvillard]

Nothing wrong with a normalize that doesn't 100% perfectly normalize across all browsers, but I did notice that across Firefox and Chrome that text-underline-offset was rendering differently.

Both inspectors are analyzing anchor elements inheriting the same text-underline-offset, but the different shows in how Chrome renders the underline significantly lower than Firefox. Is this because of the differences between the render engines? Is this something we can smooth out somehow in stylesheets?

[argyleink]

that's def poopy that 1px is causing so much issue here lol. we could try and smooth things out in our stylesheets, did you try? i'm feeling inclined to leave it.. but i'd be open to alternative value propositions if they render more predictably.

[cdvillard]

I haven't yet, but thought I'd drop a line first to see if this was already-tread ground. I'll take a look when I can and see what I can come up with. Feel free to close this if you wish. Otherwise, I might use this to track and document the effort.

…

On Thu, Jul 7, 2022, 12:52 AM Adam Argyle ***@***.***> wrote: that's def poopy that 1px <https://github.com/argyleink/open-props/blob/main/src/extra/normalize.css#L72> is causing so much issue here lol. we could try and smooth things out in our stylesheets, did you try? i'm feeling inclined to leave it.. but i'd be open to alternative value propositions if they render more predictably. — Reply to this email directly, view it on GitHub <#245 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABPV5ZWKMZVUMCCPHOCROKLVSZO7DANCNFSM52ZVIHCQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[argyleink]

no worries, this is totally "can't unsee". i'm trying some stuff in browser right now:

Firefox:

Chrome:

Safari:

default / user agent screenshots

open props normalized

Firefox:
(yeah, it's like it needs to be 2px for Firefox, to actually be normalized)

Chrome:

Safari:
(looks the same, 1px is the default)

proposed fix: adjust firefox to `2px`

Firefox:

Chrome:

Safari:

[argyleink]

checkout https://open-props--pr246-245-open-propsnormal-4mllu3ov.web.app/, it's got an updated value for firefox. thoughts?

[cdvillard]

Works for me. Pretty simple solution, all things considered.