Overflow on site causes white space to be visible on iOS9

[Klio_Peng]

Hi,

This is the website I’m building, www.yourshizuoka.com
it works fine on Google Chrome and my iphone, which is iOS 10,
but on my client’s iPad and iPhone, which are iOS 9, it looks like this…

I searched the internet and found many people have issues of flexbox on safari 9 (iOS9), but my problem doesn’t seem to be flexbox’s, seems to be the container, I must have miss some settings and ended up like this

Kind Regards
Klio.

---

Here is my public share link: Webflow - yourshizuoka
(how to access public share link)

[Klio_Peng]

I solved the problem!!
by changing the min-width of pad view’s custom container to 0px, but I don’t know why,
can anyone tell me the reason?

Thanks in advance.

[cyberdave (Dave S.)]

Hi @Klio_Peng, the reason the site is having that white strip, is that there is overflow on the site, where there is an element which is overflowing on the body, causing extra white space and horizontal scroll.

On iOS9, this results in safari attempting to show the whole page at once, including the whitespace caused by the overflow.

The solution is to identify the element on the site which is extending beyond the body and remove that styling so that the element is always within the 100% width of the body.

I took a look and found this:

Here you can see on the slider arrow class, there is a left position offset 105%. Removing that offset seems to correct the overflow at least on desktop, you should check there are no other offsets like that being used on lower viewports.

I hope this helps!

[Klio_Peng]

Thanks a lot, @cyberdave!!
(and thank you for changing the title)

Cheers,
Klio.