Search code examples
htmlgoogle-chromeresponsiveviewport

Chrome: viewport 320 creates horizontal scrollbar and lets you scroll further down (responsive)

Issue

I'm currently working on a website which is designed at a fixed width of 320px.

When setting the viewport to 320 I'm facing the issue that I can scroll down further then it should and there is also a horizontal scrollbar.

I reduced the code as far as possible and came to this snippet where it is reproduceable with the Chrome Inspector at >320px (and also on Android Devices).

Code

<html style="overflow-x: hidden;">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=320, user-scalable=no">
      <title>Test</title>
   </head>
   <body style="width: 320px">
      <div>
         <p>
            Bacon ipsum dolor amet alcatra porchetta ham, ball tip pork chop kielbasa tail. Brisket prosciutto shoulder kielbasa picanha spare ribs ball tip. Biltong drumstick venison burgdoggen. Shankle meatball flank jerky boudin porchetta pig bresaola tongue shoulder pork chop prosciutto. Capicola fatback burgdoggen shoulder frankfurter biltong pork chop flank swine bresaola boudin buffalo ground round strip steak. Strip steak andouille pancetta flank pig ham cow capicola. Chuck jowl tenderloin flank leberkas. Ground round pastrami chicken, turducken hamburger ribeye rump shankle pork belly shank beef ribs short ribs kielbasa andouille porchetta. Rump pig bacon tongue jerky. Pork loin brisket buffalo ball tip.
         </p>
         <p>
            Tenderloin kevin pancetta rump venison beef. Kielbasa tail pork belly cow venison capicola meatball, landjaeger short ribs alcatra. Short ribs hamburger prosciutto shank meatball, strip steak rump tongue. Pork belly short ribs capicola chuck chicken sirloin jowl tri-tip t-bone. Pork chop corned beef tail ball tip. Pancetta tri-tip tenderloin, leberkas shoulder pork belly biltong pork chop cupim kevin ham hock pork loin doner jowl landjaeger. Ground round turkey salami capicola tail rump.
            Sausage swine turkey kielbasa tail porchetta turducken ball tip capicola buffalo biltong jowl. Cow doner turducken ham hock, beef bacon short loin brisket biltong prosciutto buffalo pork. Chicken ribeye rump tri-tip sirloin short ribs frankfurter swine pork loin meatball pancetta. Alcatra rump pork cow, strip steak shank chicken jerky burgdoggen pancetta drumstick swine hamburger prosciutto bresaola. Beef pork flank shankle.
         </p>
         <p>
            Bacon ipsum dolor amet alcatra porchetta ham, ball tip pork chop kielbasa tail. Brisket prosciutto shoulder kielbasa picanha spare ribs ball tip. Biltong drumstick venison burgdoggen. Shankle meatball flank jerky boudin porchetta pig bresaola tongue shoulder pork chop prosciutto. Capicola fatback burgdoggen shoulder frankfurter biltong pork chop flank swine bresaola boudin buffalo ground round strip steak. Strip steak andouille pancetta flank pig ham cow capicola. Chuck jowl tenderloin flank leberkas. Ground round pastrami chicken, turducken hamburger ribeye rump shankle pork belly shank beef ribs short ribs kielbasa andouille porchetta. Rump pig bacon tongue jerky. Pork loin brisket buffalo ball tip.
         </p>
         <p>
            Tenderloin kevin pancetta rump venison beef. Kielbasa tail pork belly cow venison capicola meatball, landjaeger short ribs alcatra. Short ribs hamburger prosciutto shank meatball, strip steak rump tongue. Pork belly short ribs capicola chuck chicken sirloin jowl tri-tip t-bone. Pork chop corned beef tail ball tip. Pancetta tri-tip tenderloin, leberkas shoulder pork belly biltong pork chop cupim kevin ham hock pork loin doner jowl landjaeger. Ground round turkey salami capicola tail rump.
            Sausage swine turkey kielbasa tail porchetta turducken ball tip capicola buffalo biltong jowl. Cow doner turducken ham hock, beef bacon short loin brisket biltong prosciutto buffalo pork. Chicken ribeye rump tri-tip sirloin short ribs frankfurter swine pork loin meatball pancetta. Alcatra rump pork cow, strip steak shank chicken jerky burgdoggen pancetta drumstick swine hamburger prosciutto bresaola. Beef pork flank shankle.
         </p>
      </div>
   </body>
</html>

Demo

Expected Behaviour

Correct upscaling from 320px without horizontal scrolling and bottom space

Thank you!

Solution

  • Solved it by getting rid of the limitation that the inner content has to be 320 (changed all div containers to 100% and the viewport to width=device-width). The original bug seems to be a chrome bug.