Clean up browser hacks that are no longer necessary

build/check-bundle-size.js

@@ -53,6 +53,7 @@ const repo = 'mapbox-gl-js';
     execSync(`git reset --hard && git checkout origin/main`);
     execSync('yarn install');
     execSync('yarn run build-prod-min');
+    execSync('yarn run build-css');
     const priorSizes = FILES.map(([label, filePath]) => [label, getSize(filePath)]);
     console.log(priorSizes);
 

src/css/mapbox-gl.css

@@ -22,12 +22,8 @@
 
 .mapboxgl-canvas-container.mapboxgl-interactive,
 .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
-    cursor: -webkit-grab;
-    cursor: -moz-grab;
     cursor: grab;
-    -moz-user-select: none;
     -webkit-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 
@@ -37,8 +33,6 @@
 
 .mapboxgl-canvas-container.mapboxgl-interactive:active,
 .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
-    cursor: -webkit-grabbing;
-    cursor: -moz-grabbing;
     cursor: grabbing;
 }
 
@@ -84,8 +78,6 @@
 }
 
 .mapboxgl-ctrl-group:not(:empty) {
-    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -129,12 +121,6 @@
     }
 }
 
-/* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
-.mapboxgl-ctrl button::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
 .mapboxgl-ctrl-attrib-button:focus,
 .mapboxgl-ctrl-group button:focus {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
@@ -326,10 +312,6 @@
 }
 
 .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon {
-    -webkit-animation: mapboxgl-spin 2s infinite linear;
-    -moz-animation: mapboxgl-spin 2s infinite linear;
-    -o-animation: mapboxgl-spin 2s infinite linear;
-    -ms-animation: mapboxgl-spin 2s infinite linear;
     animation: mapboxgl-spin 2s infinite linear;
 }
 
@@ -369,26 +351,6 @@
     }
 }
 
-@-webkit-keyframes mapboxgl-spin {
-    0% { -webkit-transform: rotate(0deg); }
-    100% { -webkit-transform: rotate(360deg); }
-}
-
-@-moz-keyframes mapboxgl-spin {
-    0% { -moz-transform: rotate(0deg); }
-    100% { -moz-transform: rotate(360deg); }
-}
-
-@-o-keyframes mapboxgl-spin {
-    0% { -o-transform: rotate(0deg); }
-    100% { -o-transform: rotate(360deg); }
-}
-
-@-ms-keyframes mapboxgl-spin {
-    0% { -ms-transform: rotate(0deg); }
-    100% { -ms-transform: rotate(360deg); }
-}
-
 @keyframes mapboxgl-spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
@@ -561,7 +523,6 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     position: absolute;
     top: 0;
     left: 0;
-    display: -webkit-flex;
     display: flex;
     will-change: transform;
     pointer-events: none;
@@ -570,24 +531,20 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 .mapboxgl-popup-anchor-top,
 .mapboxgl-popup-anchor-top-left,
 .mapboxgl-popup-anchor-top-right {
-    -webkit-flex-direction: column;
     flex-direction: column;
 }
 
 .mapboxgl-popup-anchor-bottom,
 .mapboxgl-popup-anchor-bottom-left,
 .mapboxgl-popup-anchor-bottom-right {
-    -webkit-flex-direction: column-reverse;
     flex-direction: column-reverse;
 }
 
 .mapboxgl-popup-anchor-left {
-    -webkit-flex-direction: row;
     flex-direction: row;
 }
 
 .mapboxgl-popup-anchor-right {
-    -webkit-flex-direction: row-reverse;
     flex-direction: row-reverse;
 }
 
@@ -599,60 +556,52 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 }
 
 .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
-    -webkit-align-self: center;
     align-self: center;
     border-top: none;
     border-bottom-color: #fff;
 }
 
 .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
-    -webkit-align-self: flex-start;
     align-self: flex-start;
     border-top: none;
     border-left: none;
     border-bottom-color: #fff;
 }
 
 .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
-    -webkit-align-self: flex-end;
     align-self: flex-end;
     border-top: none;
     border-right: none;
     border-bottom-color: #fff;
 }
 
 .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
-    -webkit-align-self: center;
     align-self: center;
     border-bottom: none;
     border-top-color: #fff;
 }
 
 .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
-    -webkit-align-self: flex-start;
     align-self: flex-start;
     border-bottom: none;
     border-left: none;
     border-top-color: #fff;
 }
 
 .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
-    -webkit-align-self: flex-end;
     align-self: flex-end;
     border-bottom: none;
     border-right: none;
     border-top-color: #fff;
 }
 
 .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
-    -webkit-align-self: center;
     align-self: center;
     border-left: none;
     border-right-color: #fff;
 }
 
 .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
-    -webkit-align-self: center;
     align-self: center;
     border-right: none;
     border-left-color: #fff;
@@ -741,9 +690,6 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     height: 15px;
     border-radius: 50%;
     position: absolute;
-    -webkit-animation: mapboxgl-user-location-dot-pulse 2s infinite;
-    -moz-animation: mapboxgl-user-location-dot-pulse 2s infinite;
-    -ms-animation: mapboxgl-user-location-dot-pulse 2s infinite;
     animation: mapboxgl-user-location-dot-pulse 2s infinite;
 }
 
@@ -760,18 +706,6 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
 }
 
-@-webkit-keyframes mapboxgl-user-location-dot-pulse {
-    0%   { -webkit-transform: scale(1); opacity: 1; }
-    70%  { -webkit-transform: scale(3); opacity: 0; }
-    100% { -webkit-transform: scale(1); opacity: 0; }
-}
-
-@-ms-keyframes mapboxgl-user-location-dot-pulse {
-    0%   { -ms-transform: scale(1); opacity: 1; }
-    70%  { -ms-transform: scale(3); opacity: 0; }
-    100% { -ms-transform: scale(1); opacity: 0; }
-}
-
 @keyframes mapboxgl-user-location-dot-pulse {
     0%   { transform: scale(1); opacity: 1; }
     70%  { transform: scale(3); opacity: 0; }

src/ui/control/fullscreen_control.js

@@ -46,12 +46,8 @@ class FullscreenControl {
         ], this);
         if ('onfullscreenchange' in window.document) {
             this._fullscreenchange = 'fullscreenchange';
-        } else if ('onmozfullscreenchange' in window.document) {
-            this._fullscreenchange = 'mozfullscreenchange';
         } else if ('onwebkitfullscreenchange' in window.document) {
             this._fullscreenchange = 'webkitfullscreenchange';
-        } else if ('onmsfullscreenchange' in window.document) {
-            this._fullscreenchange = 'MSFullscreenChange';
         }
     }
 
@@ -77,8 +73,6 @@ class FullscreenControl {
     _checkFullscreenSupport() {
         return !!(
             window.document.fullscreenEnabled ||
-            (window.document: any).mozFullScreenEnabled ||
-            (window.document: any).msFullscreenEnabled ||
             (window.document: any).webkitFullscreenEnabled
         );
     }
@@ -109,9 +103,7 @@ class FullscreenControl {
     _changeIcon() {
         const fullscreenElement =
             window.document.fullscreenElement ||
-            (window.document: any).mozFullScreenElement ||
-            (window.document: any).webkitFullscreenElement ||
-            (window.document: any).msFullscreenElement;
+            (window.document: any).webkitFullscreenElement;
 
         if ((fullscreenElement === this._container) !== this._fullscreen) {
             this._fullscreen = !this._fullscreen;
@@ -125,19 +117,11 @@ class FullscreenControl {
         if (this._isFullscreen()) {
             if (window.document.exitFullscreen) {
                 (window.document: any).exitFullscreen();
-            } else if (window.document.mozCancelFullScreen) {
-                (window.document: any).mozCancelFullScreen();
-            } else if (window.document.msExitFullscreen) {
-                (window.document: any).msExitFullscreen();
             } else if (window.document.webkitCancelFullScreen) {
                 (window.document: any).webkitCancelFullScreen();
             }
         } else if (this._container.requestFullscreen) {
             this._container.requestFullscreen();
-        } else if ((this._container: any).mozRequestFullScreen) {
-            (this._container: any).mozRequestFullScreen();
-        } else if ((this._container: any).msRequestFullscreen) {
-            (this._container: any).msRequestFullscreen();
         } else if ((this._container: any).webkitRequestFullscreen) {
             (this._container: any).webkitRequestFullscreen();
         }

src/ui/hash.js

@@ -134,13 +134,7 @@ class Hash {
     _updateHashUnthrottled() {
         // Replace if already present, else append the updated hash string
         const location = window.location.href.replace(/(#.+)?$/, this.getHashString());
-        try {
-            window.history.replaceState(window.history.state, null, location);
-        } catch (SecurityError) {
-            // IE11 does not allow this if the page is within an iframe created
-            // with iframe.contentWindow.document.write(...).
-            // https://github.com/mapbox/mapbox-gl-js/issues/7410
-        }
+        window.history.replaceState(window.history.state, null, location);
     }
 
 }

src/util/browser.js

@@ -3,16 +3,6 @@
 import window from './window';
 import type {Cancelable} from '../types/cancelable';
 
-const raf = window.requestAnimationFrame ||
-    window.mozRequestAnimationFrame ||
-    window.webkitRequestAnimationFrame ||
-    window.msRequestAnimationFrame;
-
-const cancel = window.cancelAnimationFrame ||
-    window.mozCancelAnimationFrame ||
-    window.webkitCancelAnimationFrame ||
-    window.msCancelAnimationFrame;
-
 let linkEl;
 
 let reducedMotionQuery: MediaQueryList;
@@ -49,8 +39,8 @@ const exported = {
 
     frame(fn: (paintStartTimestamp: number) => void): Cancelable {
         if (errorState) return {cancel: () => {  }};
-        const frame = raf(fn);
-        return {cancel: () => cancel(frame)};
+        const frame = window.requestAnimationFrame(fn);
+        return {cancel: () => window.cancelAnimationFrame(frame)};
     },
 
     getImageData(img: CanvasImageSource, padding?: number = 0): ImageData {

src/util/dom.js

@@ -21,18 +21,7 @@ DOM.createNS = function (namespaceURI: string, tagName: string) {
 };
 
 const docStyle = window.document && window.document.documentElement.style;
-
-function testProp(props) {
-    if (!docStyle) return props[0];
-    for (let i = 0; i < props.length; i++) {
-        if (props[i] in docStyle) {
-            return props[i];
-        }
-    }
-    return props[0];
-}
-
-const selectProp = testProp(['userSelect', 'MozUserSelect', 'WebkitUserSelect', 'msUserSelect']);
+const selectProp = docStyle && docStyle.userSelect !== undefined ? 'userSelect' : 'WebkitUserSelect';
 let userSelect;
 
 DOM.disableDrag = function () {
@@ -48,12 +37,8 @@ DOM.enableDrag = function () {
     }
 };
 
-const transformProp = testProp(['transform', 'WebkitTransform']);
-
 DOM.setTransform = function(el: HTMLElement, value: string) {
-    // https://github.com/facebook/flow/issues/7754
-    // $FlowFixMe
-    el.style[transformProp] = value;
+    el.style.transform = value;
 };
 
 // Feature detection for {passive: false} support in add/removeEventListener.