CODEWITHSUNDEEP
ioscsssafarihorizontal-scrolling
Christopher
Christopher

Reputation: 6066

How to hide overflow on Safari Mobile?

I would like the view port on Safari mobile to prevent horizontal scrolling and also hide any horizontal overflow content. The reason being is that I have some animations on a website that move content off screen. As a work-around I can perhaps not animate but I would like to get it working on mobile.

When viewed on an iPhone 6 using Safari the code below allows horizontal scrolling and still shows the overflow content.

I see four posts on the subject but the suggestions for use of overflow: hidden are not working.

overflow-x: hidden, is not working in safari

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Mobile Safari Viewport - Preventing Horizontal Scrolling?

Hiding the scrollbar on an HTML page

Place this code in index.html on a server so the page can be viewed on an iPhone:

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
    <style>
    html {
      overflow-x: hidden;
    }

    body {
        background-color: black;
        overflow-x: hidden;
    }

    #content {
      width: 100%;
      overflow-x: hidden;
    }

    .tagline {
      color: white;
      font-size: 1.8em;
      font-style: italic;
      position: absolute;
      white-space: nowrap;
      overflow-x: hidden;
      top: 10%;
      left: 80%; /* This position is off screen on purpose */
    }
    </style>
</head>

<body>
  <div id="content">
    <span class="tagline">Testing span reaching outside edge of window on mobile</span>
  </div>
</body>

</html>

Upvotes: 0

Views: 4882

Answers (1)

c01gat3
c01gat3

Reputation: 597

If you position:fixed; the #content it would prevent it from scrolling:

#content {
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  position: fixed;
}

Upvotes: 1

Related Questions