Calculate correct canvas size if more than one parent container has a…

… css transform property (mapbox#11493) * fix canvas sizing to not stop checking transform at parent container
ahocevar · Mar 23, 2022 · 84579e4 · 84579e4
1 parent 3258bca
commit 84579e4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/debug/canvas-size.html b/debug/canvas-size.html
@@ -9,25 +9,34 @@
         html, body {
             margin: 0;
             padding: 0;
-            background-color: gray;
         }
-        #map-container {
-            width: 500.52px;
-            height: 500.52px;
-            transform: scale(0.7);
+
+        #scaled-container {
+            width: 1920px;
+            height: 1080px;
+            transform: scale(0.35);
             transform-origin: top left;
-            background-color: black;
-        }  
+            background-color: grey;
+        }
+
+        #map-container {
+            width: 1720px;
+            height: 880px;  
+            transform: translate(100px, 100px);
+        }
+
         #map {
             height: 100%;
-            width: 100%;
+            width: 100%; 
         }
     </style>
 </head>
 
 <body>
-    <div id="map-container">
-        <div id="map"></div>
+    <div id="scaled-container">
+        <div id="map-container">
+            <div id="map"></div>
+        </div>
     </div>
 
 <script src='../dist/mapbox-gl-dev.js'></script>

diff --git a/src/ui/map.js b/src/ui/map.js
@@ -2686,20 +2686,21 @@ class Map extends Camera {
         const height = this._container.getBoundingClientRect().height || 300;
 
         let transformValues;
+        let transformScaleWidth;
+        let transformScaleHeight;
         let el = this._container;
-        while (el && !transformValues) {
+        while (el && (!transformScaleWidth || !transformScaleHeight)) {
             const transformMatrix = window.getComputedStyle(el).transform;
-            if (transformMatrix && transformMatrix !== 'none') transformValues = transformMatrix.match(/matrix.*\((.+)\)/)[1].split(', ');
+            if (transformMatrix && transformMatrix !== 'none') {
+                transformValues = transformMatrix.match(/matrix.*\((.+)\)/)[1].split(', ');
+                if (transformValues[0] && transformValues[0] !== '0' && transformValues[0] !== '1') transformScaleWidth = transformValues[0];
+                if (transformValues[3] && transformValues[3] !== '0' && transformValues[3] !== '1') transformScaleHeight = transformValues[3];
+            }
             el = el.parentElement;
         }
 
-        if (transformValues) {
-            this._containerWidth = transformValues[0] && transformValues[0] !== '0' ? Math.abs(width / transformValues[0]) : width;
-            this._containerHeight = transformValues[3] && transformValues[3] !== '0' ? Math.abs(height / transformValues[3]) : height;
-        } else {
-            this._containerWidth = width;
-            this._containerHeight = height;
-        }
+        this._containerWidth = transformScaleWidth ? Math.abs(width / transformScaleWidth) : width;
+        this._containerHeight = transformScaleHeight ? Math.abs(height / transformScaleHeight) : height;
     }
 
     _detectMissingCSS(): void {