[website] Fix subscribe input with Safari

[oliviertassinari]

The issue can be seen at the bottom of any blog post, e.g. https://mui.com/blog/mui-x-v6-alpha-zero/

I have used the opportunity to fix the autofill style on Chrome:

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34869--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 7cb16b1

[danilo-leal]

Awesome, looks great! It's so annoying that outline doesn't properly work on Safari...

[oliviertassinari]

@danilo-leal Yeah, I think the learning for me is that the only valid use case is outline: 0 when there are better ways to handle the a11y focus ring.

[oliviertassinari]

We will need to fix https://mui.com/base/react-input/#introduction too, do you want to take care of it?

Safari is 18.86% of the browser shares.

[danilo-leal]

Sure, I'll do it in one of my PRs. That's really a bummer... outline reads so much better than box-shadow for this, which never ceases to feel hacky 😅

[oliviertassinari]

Sure, I'll do it in one of my PRs.

@danilo-leal Thanks. Only please don't bundle it with unrelated changes, in case this is what you meant 😁. For example, a 10 LOCs PR is great to be able git blame and understand the history.

[michaldudak]

FYI, this bug apparently has been fixed in Safari Technology Preview Release 157 (https://developer.apple.com/safari/technology-preview/release-notes/#r157), released on Nov 7. So chances are the next stable update will include the fix.

[oliviertassinari]

@michaldudak So we might need this for another 12-24 months? How long will it take for, say 80% of the iOS/macOS users to get the fix? https://caniuse.com/mdn-css_properties_outline

[michaldudak]

Perhaps a bit less. I'm looking at focus:visible support, which was introduced in Safari 15.4 on March 14, 2022. It seems that users of supported versions represent almost 15% of all, and older Safari users are 2.9% of all. So, after nine months, almost 84% of all Safari users have this feature working.