search

x-govuk / govuk-prototype-components

Use common components that are not yet part of the GOV.UK Design System.
https://x-govuk.github.io/govuk-prototype-components/
MIT License
3 stars 2 forks source link

Masthead component has strange behaviour on zoom in Chrome and Firefox on Mac #245

Closed vickytnz closed 2 months ago

vickytnz commented 3 months ago

I sometimes zoom right out to get a quick screenshot, and from this discovered a strange zoom issue on product pages at 33% zoom on chrome:

image at 33% on Chrome with product area going to a thin column

It isn't a problem on Safari (possibly since I can't zoom out more than 50%) but is even worse on Firefox which has distortions even at 80%

image at 80% on Firefox with product area going to a thin column

It seems to be a problem with display: flex; in the css:

.x-govuk-masthead {
    padding-bottom: 15px;
    background-color: #2288aa;
    color: #ffffff;
     display: flex; 
}

since when I turn that off the formatting is a little spaced out but the zoom problem disappears.

Example in Firefox with display:flex; turned off

This is the CSS i have added as an override to fix it (I think):

/* fixing app header issues - remove if fixed upstream */
.govuk-header__container {
  border-bottom: 11px solid $govuk-brand-colour !important; // random line appears so 1px extra
}

.app-header--no-border {
    border-bottom: 10px solid $govuk-brand-colour !important;
    margin-bottom: 0;
}

.x-govuk-masthead {
  margin-top: -15px !important;
  display: block !important; //fixing flex issue when zoomed out;
}

.x-govuk-masthead > .govuk-width-container .govuk-breadcrumbs{
padding-top: 11px !important; //line up with other parts of the site for breadcrumbs
}

/* end fixing app header issues  */
paulrobertlloyd commented 2 months ago

There’s definitely some weird browser bug at play here; in addition to the above, I was able to see how removing the negative margin on a proceeding navigation element would stop the width of the masthead from collapsing.

Have fixed this by removing flex layout, and using an old-school method of preventing margin collapse by setting the top padding to 0.1px 🙃. Browsers!