MOBILE-4189 core: Fix collapsible header zoom

When the system font size is increased, the CSS values and computed style values are not equivalent. So we have to take that into account when mirroring styles to the floating title.

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;
+    }
+
 }
 
 /**