diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index bdc9dc474..0aaff8cef 100644 --- a/src/core/directives/collapsible-header.ts +++ b/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; }, [{}, {}]); diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts index 36bdceb2d..a969e6463 100644 --- a/src/core/singletons/dom.ts +++ b/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; + } + } /**