Glitches on Safari iOS

[dascritch]

• smallest form got incorrect position/size of buttons, svg in button issue
• badly refreshed svg, animations glitches
• not selectable text , mainly on popup
• programmatically disable preview links, especially when when stay on the same page
• reduce systeme gesture annoying interactions
• incorrect loading state at start (autoplay preventing related)
• clicking in playlist before first play do change the controller but not starting the audio (autoplay preventing related) See Resolve specific autostart issue on Safari iPhone #149
• restore alternative fine browsing mode (JS related) See Alternative fine browsing mode on Safari #150
• focus outline of WebComponent (CSS related) See Focus outline of WebComponent on Safari #151

[dascritch]

Needed kit for non Apple prisoners ;)

• https://medium.com/@nikoloza/how-to-debug-remote-ios-device-using-chrome-devtools-f44d697003a7
• https://github.com/google/ios-webkit-debug-proxy

[dascritch]

Most of the actual glitches seems from https://developer.apple.com/forums/thread/90784
https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ is not really informative as our tests are already in “muted” state, and click events aren't honored. Promises are systematically going in error

This is very bad. And that Apple decides of a white-list is not good at all.

[dascritch]

Safari should be the last browser to not be able de calculated CSS properties of <svg> tags on the fly.

The last 4 points :

• doable
  • restore alternative fine browsing mode (JS related)
  • focus outline of WebComponent (CSS related)
• really complex to solve
  • incorrect loading state at start (autoplay preventing related)
  • clicking in playlist do change the controller but not starting the audio (autoplay preventing related)

[dascritch]

it's not on <cpu-audio>, it's not on :host , it's not :focus , :focus-within , :hover .....
I'm searching for the source of the default stylesheet of safari :/

[dascritch]

Found ! https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

[dascritch]

OK, Safari is not understanding yet :focus-visible, butseems to have its specially prefixed property :-webkit-direct-focus and in fact, Safari doesn't understand corectly how to handle "focus" event
https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/

[dascritch]

(I write it in French because it really piss me off)

Si vous jouez avec les pseudo-sélecteurs de :focus comme :focus-within ou :focus-visible dans le shadowRoot et que vous vous demandez pourquoi c'est tant le bordel sur Safari. Ben c'est en rapport avec vos problèmes sur la gestion de l'événement focus , buggé depuis toujours sur Safari
https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/
Le mot-clé qui pourrait vous aider dans vos futures recherches : :-webkit-direct-focus

[dascritch]

Sticked in "loading" mode wasn't autoplay prevented, but some events missing in Safari iOS.

[dascritch]

Some bugs in tests seems related to seeking time operations.
And yes : https://stackoverflow.com/questions/18266437/html5-video-currenttime-not-setting-properly-on-iphone

I had to reduce the ready state limit to 2 (HTMLVideoElement.prototype.HAVE_CURRENT_DATA) as the loadeddata event on iOS would often never come in higher than 2.
Completely crazy

[dascritch]

:host(:focus) {  outline : none; } 

Not working too :/