Page heading not increasing font size (Safari)

[Marat-Faizov]

Updating font size in Safari to 36px make h1 element smaller than it was. Decrease from 48px to 36px.
The possible issue that parent elements using a combination of em and rem units for font size, what leads Safari to inherit not correct value.

Instructions how set font size on MacOs:
Preferences > Advanced > Accessibility: set the font size to 36px (which is 200% of the standard 16px)

[danielelder]

I'm not sure exactly what "Increase of font size on Safari decrease font size of the page heading to 39px from 48px on regular 16px setting" means, could or explain the issue further?

[danielelder]

Looking the at the docs, the class .govuk-fieldset__legend--l sets the font size to 36px (with media query min-width: 40.0625em).

You've then increased the minimum font size to 36px and the screenshot shows the computed font size as 36px.

That's what I would expect to happen, if the screen is below the min-width: 40.0625em then the default 24px is increased to the minimum font size of 36px.

I tested this on Safari 14.1.1.

[Marat-Faizov]

@danielelder
Updated the issue, and added more screenshots to display the issue better.
You are correct this issue is only in the viewport with media query min-width: 40.0625em, but applies to govuk-heading-xl too, and not h1 nested in legend

[danielelder]

Thank you Marat, I can see the issue with the govuk-heading-xl class, but not with the legend.