Andrey (azangru) wrote,
Andrey
azangru

CSS is hard...

Here’s someone’s site with a characteristic symptom of setting width to 100vw (and using a mac while doing so) — a horizontal scrollbar with thin extra space added because 100vw includes the width of the vertical scrollbar.

It quickly becomes apparent that both the header and the footer on the site have width set to 100vw:





But it is only the footer and not the header that is actually responsible for the scrollbar. It took me a little while to notice the max-width: 100% added in a different header class, which keeps the width of the header in check.

But what the hell is going on with the top margin of the footer? Why does the browser show a narrow band of empty white space between the window’s right border and the right border of the margin? It makes zero sense unless it’s a browser dev tools bug:

Subscribe

  • (no subject)

    Is it ... Bill Maher? Is he, in the penetrating eyes of this insightful lady, the emblem of white supremacy now? The comments to the tweet say it…

  • (no subject)

    Also, Google's documentation style guide. With the latest trends about the correct language, obvi. This one via HN.

  • (no subject)

    Google's document on how they build Chrome dev tools with web components. And yeah, it includes a special dance for some semblance of type safety,…

  • Post a new comment

    Error

    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments