[SPIKE] Tudor crown Safari position tweaks

[colinrotherham]

Spike for #4297 to fix vertical alignment (Header product name) in Safari #4297 (review)

This PR aligns Chrome and Safari again

• Current: header/full-width-with-navigation/preview
• Before: header/full-width-with-navigation/preview from #4297
• After: header/full-width-with-navigation/preview from #4423

Original GOV.UK text

Branch main renders the GOV.UK text and product name 1px too low in Firefox
https://govuk-frontend-review.herokuapp.com/components/header/full-width-with-navigation/preview

Using DPI @1x

Using DPI @2x

Note: We see Safari and Chrome baseline differences using @2x versus @1x

GOV.UK text as SVG

PR #4297 renders the product name 1px too high in Chrome and Safari:
https://govuk-frontend-pr-4297.herokuapp.com/components/header/full-width-with-navigation/preview

Using DPI @1x

Using DPI @2x

Note: We see Safari and Chrome baseline differences using @2x versus @1x but the SVG text is unaffected

GOV.UK text as SVG with position tweaks

PR #4423 (this spike) is correctly aligned:
https://govuk-frontend-pr-4423.herokuapp.com/components/header/full-width-with-navigation/preview

There's also a workaround included for Firefox where the text baseline is calculated 1px lower (or 0.5px at @2x DPI) than other browsers, breaking alignment with the product name. This could be "fixed" in Firefox with:

  // Maintain space below logo when wrapped
  margin-top: $product-name-offset;
+ @-moz-document url-prefix() {
+   margin-top: $product-name-offset - 0.5px;
+ }

Firefox also appeared to have issues with some HiDPI resolutions where the top and bottom parts of the Crown (and the GOV.UK text) could subtly move apart as they round to pixel values but this was fixed in fe6f75b

Related Firefox issues regarding SVG rendering accuracy:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1395350
• https://bugzilla.mozilla.org/show_bug.cgi?id=1674681

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-5.0.0-beta.1.min.css	114 KiB
dist/govuk-frontend-5.0.0-beta.1.min.js	37.93 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	77.02 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	72.35 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.8 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.64 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	37.94 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.3 KiB

Modules

File	Size
all.mjs	68.67 KiB
components/accordion/accordion.mjs	21.37 KiB
components/button/button.mjs	4.48 KiB
components/character-count/character-count.mjs	20.78 KiB
components/checkboxes/checkboxes.mjs	5.61 KiB
components/error-summary/error-summary.mjs	5.79 KiB
components/exit-this-page/exit-this-page.mjs	15.79 KiB
components/header/header.mjs	3.68 KiB
components/notification-banner/notification-banner.mjs	4.32 KiB
components/radios/radios.mjs	4.6 KiB
components/skip-link/skip-link.mjs	3.6 KiB
components/tabs/tabs.mjs	9.33 KiB

View stats and visualisations on the review app

---

Action run for 058b443

[colinrotherham]

Ideally we'd keep vertical-align: baseline; but it appears 1px lower in Chrome vs. Safari or Firefox

But for now, it's more reliable to use vertical-align: top with a margin

In future we could tweak font-size: 30px (or reset to font-size: 0) to try and solve the variation:

govuk-frontend/packages/govuk-frontend/src/govuk/components/header/_index.scss

Lines 97 to 104 in 88c45d8

	// Font size needs to be set on the link so that the box sizing is correct
	// in Firefox
	@include govuk-typography-weight-bold;
	display: inline-block;
	margin-right: govuk-spacing(2);
	font-size: 30px; // We don't have a mixin that produces 30px font size
	line-height: 1;

[colinrotherham]

@owenatgov Having an parent link with display: inline didn't help child alignment, but think it's a bug from #2549 where display: inline was added at tablet size but the product name didn't wrap until desktop

[querkmachine]

This seems to have done the job in desktop Safari, though—just to add some more pixelpushing fun to the equation—it now appears to be slightly misaligned in iOS Safari where it wasn't before. Only by a pixel, so might need to click through to the full size image.

Outside of that, I think this could use some code comments explaining what's going on. Why is padding and alignment being changed between mobile and tablet? Why does it become inline on desktop? Why is a Firefox 'hack' needed and why does a fractional pixel value fix it?

More generally, and not specific to this PR, was the product name always positioned like this regardless of viewport size? I'm not sure it was like this in v4?

[colinrotherham]

@querkmachine Ah that's fair, I only checked tablet and desktop

Hopefully enough of a spike to demonstrate what's possible, or that the SVG points needs snapping to pixels otherwise Firefox is going to go ahead and do it anyway 😣

See #4423 (comment) for "Why does it become inline on desktop?"

Do you want me to hand back over to you or shall I answer the other questions?

[querkmachine]

@colinrotherham I've updated #4297 with a tweaked SVG that snaps some of those errant .005px coordinates to their full number.

At a glance, the lockup appears to be rendering in the right position on Firefox and iOS Safari and 1px lower than the product name in Chrome and macOS Safari. Can you corroborate that that's what you see too?

[colinrotherham]

Sorry for the delay @querkmachine

Yeah, for the GOV.UK part it's exactly as you said, 1px too low in Chrome and macOS Safari now. Taking just the Product Name text though, it's perfectly v-aligned in Chrome, Firefox and Safari

I think we should go back to it just being Firefox misaligned and apply the CSS hack

[colinrotherham]

@querkmachine Mind taking another look?

The new SVGs have definitely helped as has using a single compound path

[querkmachine]

I've now merged the code changes from this spike into the branches for v5.0 (#4449) and v5.x (#4297). If everything in those branches is looking good, this spike can be shut down.

Thanks for spending the time to look at this!