Website Drag-able Horizontally on Ipad - (No Horizontal Scroll Bar Visible)

Question

While using an safari on ipad the website loads and the user can drag the website to the left and right which ends up showing a beige background (even though there is no horizontal scroll bar visible) Video below shows the issue.

Video Showing the Issue

I have added this to the wordpress header.php file but still the same;

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>

Answer 1

The third column div, within the website header was overflowing the body towards the right, so even though; a horizontal scroll bar was not visible (disabled using overflow:hidden and viewport meta) it was still allowing the left and right horizontal drag-ability for the user, when viewing on iPad (only ipad).

Using chrome inspector and setting the borders to: solid 3px; helps in finding the overflowing area.

Answer 2

It is a safari feature that indicates the end of scrollable page. You can change that colour by setting the background colour of the lowest level container, most likely the body tag