Andrey (azangru) wrote,
Andrey
azangru

Lebedev’s agency announces a site they built for a client:

If viewed on a non-mac computer (macs hide scrollbars by default), one can see the horizontal scrollbar in the bottom of the page:



At first I thought it’s because the developer set the width of one of the main containers to 100vw — because I myself used to do that. 100vw, however, usually (not sure if always, in all browsers) will return the total width of the viewport, including the width of the vertical scrollbar, which means that if the page is tall enough to show the vertical scrollbar, 100vw will make its inner width greater than the visible inner width of the page, and a horizontal bar will appear. Which makes 100vw a pretty useless CSS rule.

But no, it turned out to be sillier than that. It’s the stupid top cookie banner that extends beyond the width of the page:



And the reason it does so is because they are using negative 15-pixel margins on it to override 15-pixel paddings inherited from what they use for their grid system:



The moral of the story is: CSS is tough. And you can bet the developer used a mac, because macs hide this kind of problem by not showing scrollbars by default.
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