fix(fn): inconsistent text field borders across zoom levels [ci visual] #2911
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.
Description
On some operating systems supporting sub-pixel rendering the browser may
inconsistently approximate the height/widths of boxes across zoom level. The
issue becomes apparent when multiple controls are placed together (e.g.,
table rows, tags, input boxes) as the user zooms in/out.
Specifying the border-width property is a solution that does not involve
using future CSS specs or GPU-based calculations.
Screenshots
Zoom level 80% - but the same issue occurs across multiple zoom levels.
Before:
After:
Please check whether the PR fulfills the following requirements
rem
fd-*
class is used in the filefd-rtl
,fd-ellipsis
,fd-flex
,fd-selected
,fd-focus
, ect.)fd-reset()
mixin is applied to all elementsnormalize
optionunnormalize
option[ci visual]
so it can trigger chromatic visual regression (e.g.test: run chromatic visual regression [ci visual]
)