fix(Anchor): use text-decoration instead of box-shadow for chromium breaking underline support #1841
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…reaking lines support
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit a0f07ea:
|
tujoworker
force-pushed
the
fix/anchor-underline
branch
from
557bf1f to
d4ed041
Compare
✅ DNB Eufemia Portal deploy preview ready
|
tujoworker
force-pushed
the
fix/anchor-underline
branch
from
d4ed041 to
69becde
Compare
tujoworker
changed the title
tujoworker
force-pushed
the
fix/anchor-underline
branch
from
69becde to
598ceae
Compare
tujoworker
force-pushed
the
fix/anchor-underline
branch
from
598ceae to
a0f07ea
Compare
langz
approved these changes
Dec 21, 2022
There was a problem hiding this comment.
Looks great 👍
One observation/thought is that the "alignment" of the letters/line following the "line break" is a bit further to the left than the 1st/"starting line". Not sure if it should be like this or not 🤔.
This was in Chrome using the Deploy preview:
|
Yeah, this is because of the tiny padding (left&right). UX wants even more. We should check if we can remove it entirely. |
|
🎉 This PR is included in version 9.45.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
joakbjerk
pushed a commit
that referenced
this pull request
Mar 27, 2023
…reaking underline support (#1841) * fix(Anchor): use text-decoration instead of box-shadow for chromium breaking lines support * Update snapshots * Update snapshots additional snapshots
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Chromium based browser have no longer support for Anchor underline based on
box-shadow. At least when I test it.That said, we can still support it (with
insetand negative offset), but the underline offset is then not enough by 1 or 2px.vs
But now that we do not need to support IE anymore, we can make use of newer CSS properties, like:
text-decoration-colortext-decoration-thicknesstext-underline-offsetOut puppeteer chromium version does not support
thicknessfrom what I can see, so it is 1px thick:I'm not 100% sure if we should release this in v10 or v9 as per now. But I think, it should be ok in v9 as well.