Entire Web Page Overflowing on Mobile

[gdaffa]

Summary

Hello i want to report a visual bug in your website. Your web, elementary.io has a weird overflow on low screen size, especially on mobile. This overflow appears on all of your pages on elementary.io, meaning it doesnt appear on your old design on subdomain addresses.

Screenshots

Here is the screenshot on my phone with my language page:

As you can see it has a weird gap on the right of the screen. First i thought it only appear on chrome or just this web page. So i tried multiple solution that might fix the bug but nothing works.

1. Trying on different localization (elementary.io/en)
2. Trying on different page (elementary.io/get-involved)
3. Trying on different browser (Firefox)

Debugging

I have tried to search and fix the problem myself, but i cant find it.

I tried to debug with transparent background thats why its all red, but i cant find the overflowed element. In other hand when i change the selector from html * to html, html * the overflowed section got a little red, this mean its part of the html and not the child element.

Strangly when the viewport is 320px or lower, the overflow is gone, i still cant find what triggers that in css sources section.

Solution

My solution is to add overflow-x: hidden on html/body element, that should fix a lot of problem with overflowing element. Would you like me to make a PR for that?

[lewisgoddard]

I can't seem to reproduce this, can you post your viewport dimensions and density from https://whatismyviewport.com/ ?

[gdaffa]

My mobile viewport is 360x688.

I forgot to mention that im using chrome on the debugging part. If you want to reproduce this on desktop, make sure dont go below 320px, and try to scroll with the touch sensor or shift+scroll.

Here i tried to reproduce on Firefox desktop.

Im using ~340px viewport on the desktop browser, the overflow got bigger as you decrease the viewport.

[gdaffa]

Update: After another debugging, the overflow only appear on 323px or bigger viewport. But i still cant find any line that related to 322 or 323 viewport style on css sources section.

[lewisgoddard]

It's the language popover in the footer, this bug must have been around a while. The reason why you can't find this in the code for viewport widths is because it isn't a breakpoint, just an arbitrary text wrap after the length of the copyright notice. I've proposed a fix in #4012

[gdaffa]

Oh nice you found the bug, not just use overflow-x property. Glad to hear someone fix a problem, not just hide it.