iOS Safari v12 compatibility

[ArtisArtStudio]

The wheel just doesnt draw at all on iOS (12.5.6). Both Safari and Chrome for iOS not showing wheel at all. Anybody had this as well?

[CrazyTim]

Hi @ArtisArtStudio, I'm not able to reproduce.

Can you share some code (codepen)? Does it happen with one of the examples?

Notes:

• All web browsers on iOS/iPadOS use Safari under the hood.
• I've tested using the latest version of Safari on iPadOS/macOS and it works fine.
• Safari 12.5.6 came out in 2019, and this library is compiled to ES6, so it should work.

[ArtisArtStudio]

below line with "resolution:" was causing the problem:

i._mediaQueryList = window.matchMedia('(resolution: ${window.devicePixelRatio}dppx)'), i._mediaQueryList.addEventListener("change", i._handler_onDevicePixelRatioChange, { once: !0 }) }

So I put a version control and run this line only if iOS is >=13 then it worked for me. resolution is not (fully?) supported by iOS. (however it seemed to work for iOS>13 that is why I put the version control)

https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

[CrazyTim]

@ArtisArtStudio good find!

Do you know if matchMedia was throwing an error?

You could also try calling wheel.resize(), although it is already called internally when the wheel is initialised.

I see that the change event of MediaQueryList was implemented in iOS Safari 14.0 (June 2020).

Also ResizeObserver was implemented in iOS Safari 13.4 (Sep 2019).

[ArtisArtStudio]

Hi Tim,

It wasnt throwing error. I connected iphone 6 for dev tools called Inspect and it was just stopping at that line when I debug so that is how I realized. So probably I should check for iOS>14.
Not sure what resize() does? it works for my purpose (I think) how would eliminating change event affect it? It seem to work for me. I have mediaqueries in my landscape.css and it resizes it properly. :)

[ArtisArtStudio]

Another point: on the same iOS, 12.5.6, with Safari, the touch (interactive) feature doesnt work. It works on Chrome on the same iOS/machine. I didnt dig down why as it doesnt matter for my case. So I write here just for information.

[CrazyTim]

@ArtisArtStudio thats interesting, it will probably be difficult for me to reproduce that without a device on hand. I might ask around see if anyone has an old iPhone they aren't using :).

Open to suggestions if anyone knows!