fix(field): field borders now are correctly colored even on Safari #5737
+13
−6
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
TextFields and Selects on Safari were showing a dark line, even when primary color was different. Fixes: 5668
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.
Hi there! This is a small patch to fix an annoying bug that occurs with Fields on Safari, both on macOS and iOS.
As also described in issue #5668, Fields such as
<md-outlined-text-field>and<md-outlined-select>, when focused, show an underlying dark line, even if the primary theme color is set to something else. This patch addresses said issue.Here you can take a look at what is going on with the latest version of this library (v2.2.0 at this moment).
If you look carefully at the focused input in the first screenshot, you'll see that dark line just beneath the label, whereas all other parts of that input are brown-ish.
The second image shows the resulting page after having applied this patch. Here you can see how the dark line is no longer visible and all parts of the input border have the same color.
Even though these screenshots were captured on a iOS 18 Simulator, I've seen this issue both on real iOS devices, and previous versions of iOS Simulators. The same issue also occurs on Safari on macOS.
Moreover, every recent version of
@material/webseems to be affected by this bug.@asyncLiz could you take a look at this PR?
PS: Thanks for the awesome project!
Fixes: #5668