On Safari 11+, fullscreen mode is distorted

[aparajita]

mapbox-gl-js version:

0.39.1

Steps to Trigger Behavior

1. Open https://www.mapbox.com/mapbox-gl-js/example/fullscreen/ in Safari 11+.
2. Click on the fullscreen control.

Expected Behavior

Map is scaled properly.

Actual Behavior

Map is stretched horizontally. You can see that easily by looking at the labels.

I checked in Safari 9.1 and it works correctly.

[jfirebaugh]

It works correctly in Safari 10 too, so this is probably a regression in Safari 11 beta. Have you opened an issue in the Apple bug reporter?

[aparajita]

Not yet, I wasn't sure if it was a Safari bug or not. Since the bug isn't there in 10 and is in Safari TP, it must be a webkit regression.

[aparajita]

Reported to both Apple and WebKit.org.

[ashleyclough]

I fear there may be more to the problem:

Go to the full screen demo in Safari 10.1.2 on an iMac 17 inch retina display and the full screen image is very obviously distorted, the same full screen view in Chrome 61 displays correctly.

Safari:

Chrome:

On a 24 inch retina screen both Safari and Chrome seem to display correctly.

Same results on other GL maps, both using 0.39.1 and 0.40.0 which magically turned up while I was testing the page.

[aparajita]

@jfirebaugh Did you test on a Retina or non-Retina display?

[aparajita]

Screen aspect ratio may have something to do with it. Seems like it's working correctly on displays with an aspect ration of 1.6, but is stretched on displays with an aspect ratio of 16:9.

[aparajita]

Here's the WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=176841

[anandthakker]

👍 thanks for filing the WebKit issue @aparajita

[jfirebaugh]

You may be hitting gl.MAX_RENDERBUFFER_SIZE like in #2673. If so, I'm afraid this is something we're not going to be able to fix.

[aparajita]

Nope, the image is crisp, just stretched. I did some more investigation and it has to do with the aspect ratio of the display, but only at certain resolutions. See the Apple bug report for more info.

[mourner]

Closing as a browser bug we can't address on our side. Let's hope the Safari team fixes it soon.