fix(field): field borders now are correctly colored even on Safari

[l0ll098]

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.

Before patch	After being patched

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/web seems to be affected by this bug.

@asyncLiz could you take a look at this PR?

PS: Thanks for the awesome project!

---

Fixes: #5668

[asyncLiz]

Sorry for the long delay on this, and thank you for putting together a PR!

I did a bit of debugging on this, and I see the issue in an iOS 17.2 simulator. However, when I try inspecting and adding "border-color: inherit" to ".outline-notch", I see that the color is fixed. When I unfocus and re-focus the text field, it's broken again until I toggle "border-color: inherit" on and off.

Without any CSS changes on our catalog, I also see that the border color is incorrect after focusing, but "resets" and fixes itself when hovering.

Screen.Recording.2024-12-03.at.11.42.40.AM.mov

This is an indicator to me that there could be an underlying webkit style caching bug with pseudo elements, or an issue with how the border: inherit shorthand is applied when inheriting non-shorthand properties like border-color.

I'm hesitant to accept this PR until we know a bit more about why it's not working. We should confirm whether or not it's a webkit bug and file an issue if it is.

Do you mind investigating some with a standalone reproduction of this issue outside of our component? More than likely it's something to do with multiple levels of inheritance, pseudo elements, and/or border vs border-color.