Merge pull request #3797 from NoelDeMartin/MOBILE-4189

MOBILE-4189 core: Fix collapsible header zoom

src/core/directives/collapsible-header.ts

@@ -378,8 +378,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                     textProperties.includes(property),
             )
             .reduce((styles, property) => {
-                styles[0][property] = collapsedTitleStyles.getPropertyValue(property);
-                styles[1][property] = expandedTitleStyles.getPropertyValue(property);
+                styles[0][property] = CoreDom.getCSSPropertyValue(collapsedTitleStyles, property);
+                styles[1][property] = CoreDom.getCSSPropertyValue(expandedTitleStyles, property);
 
                 return styles;
             }, [{}, {}]);

src/core/singletons/dom.ts

@@ -22,6 +22,8 @@ import { CoreEventObserver } from '@singletons/events';
  */
 export class CoreDom {
 
+    static fontSizeZoom: number | null = null;
+
     // Avoid creating singleton instances.
     private constructor() {
         // Nothing to do.
@@ -579,6 +581,38 @@ export class CoreDom {
         }
     }
 
+    /**
+     * Get CSS property value from computed styles.
+     *
+     * @param styles Computed styles.
+     * @param property Property name.
+     * @returns Property CSS value (may not be the same as the computed value).
+     */
+    static getCSSPropertyValue(styles: CSSStyleDeclaration, property: string): string {
+        const value = styles.getPropertyValue(property);
+
+        if (property === 'font-size') {
+            if (this.fontSizeZoom === null) {
+                const baseFontSize = 20;
+                const span = document.createElement('span');
+                span.style.opacity = '0';
+                span.style.fontSize = `${baseFontSize}px`;
+
+                document.body.append(span);
+
+                this.fontSizeZoom = baseFontSize / Number(getComputedStyle(span).fontSize.slice(0, -2));
+
+                span.remove();
+            }
+
+            if (this.fontSizeZoom !== 1) {
+                return `calc(${this.fontSizeZoom} * ${value})`;
+            }
+        }
+
+        return value;
+    }
+
 }
 
 /**