Disables antialias for 15.4/15.5 iOS and M1 devices and provides a console warning #11615
Conversation
src/ui/map.js
Outdated
| @@ -451,6 +451,15 @@ class Map extends Camera { | |||
| throw new Error(`maxPitch must be less than or equal to ${defaultMaxPitch}`); | |||
| } | |||
|
|
|||
| // iOS 15.4 introduced a rendering bug with antialias set to `true`. Disables antialias for these devices. | |||
| if (!!options.antialias && window.navigator.userAgent && /\b(iPad|iPhone|iPod)\b/.test(window.navigator.userAgent)) { | |||
There was a problem hiding this comment.
There's an existing isSafari method in util.js that you could use.
src/ui/map.js
Outdated
| // iOS 15.4 introduced a rendering bug with antialias set to `true`. Disables antialias for these devices. | ||
| if (!!options.antialias && window.navigator.userAgent && /\b(iPad|iPhone|iPod)\b/.test(window.navigator.userAgent)) { | ||
| const iosVersion = window.navigator.userAgent.match(/OS ((\d+_?){2,3})\s/); | ||
| if (iosVersion && iosVersion[1] === '15_4') { |
There was a problem hiding this comment.
Have we confirmed that this doesn't happen on 15.3? Would it be worth it to also check for 15.5 or other future versions in case this isn't in the next Safari minor version?
There was a problem hiding this comment.
I think it's worth adding 15.5 as well. Worst case we have slightly worse maps for a couple of months. Best case we avoid broken maps for months.
src/ui/map.js
Outdated
| const iosVersion = window.navigator.userAgent.match(/OS ((\d+_?){2,3})\s/); | ||
| if (iosVersion && iosVersion[1] === '15_4') { | ||
| options.antialias = false; | ||
| console.warn(`Antialias has been disabled for iOS 15.4 devices.`); |
There was a problem hiding this comment.
It might make sense to use the warnOnce method from util.js here. I believe that would prevent multiple warnings being fired (e.g. if there's multiple maps on a page).
|
On top of what @ryanhamley added, I'd extract this into a new function in util/util.js Before I accidentally threw together a duplicate fix. If anything from there seems helpful, go for it: https://github.com/mapbox/mapbox-gl-js/compare/safari-antialias-bug |
I don't think we can detect M1 reliably, so we should disable |
No worries. I preferred your approach so I cherry-picked the commit! |
|
Issue still happening on chrome and firefox on iOS |
avpeery
changed the title
|
@ansis Good to go once lint issue is fixed! (done) |
…nsole warning (#11615) * disable antialias and add a warning for 15.4/15.5 iOS and M1 devices Cherry Pick 8ea2f7eeb70bd804c03433523a0203c5fb4b30f Co-authored-by: Ansis Brammanis <[email protected]>
* Disables antialias for 15.4/15.5 iOS and M1 devices and provides a console warning (#11615) * Disables cooperative gestures when map is fullscreen in Safari (#11619) Co-authored-by: Ansis Brammanis <[email protected]>
…nsole warning (mapbox#11615) * disable antialias and add a warning for 15.4/15.5 iOS and M1 devices Cherry Pick 8ea2f7eeb70bd804c03433523a0203c5fb4b30f Co-authored-by: Ansis Brammanis <[email protected]>
Closes #11609. After investigating #11609, it was discovered that maps with terrain and antialias enabled on iOS 15.4 devices experience severe rendering issues in Safari due to a WebKit bug introduced in the 15.4 release that sometimes discards multisample texture content. This approach disables antialias for 15.4 devices by checking the user agent.
Launch Checklist
mapbox-gl-jschangelog:<changelog>Fixes rendering bug for iOS 15.4 and M1 devices using maps with antialias enabled.</changelog>