iPhone上奇怪的黑色区域

Question

I have a strange problem. The website is using a template and on IPhone it is showing a strange black vertical bar on the right side.

I installed safari and activated the user agent. When I set the agent to the ipad, I am seeing the problem, but client told me its on his IPhone.

Strangely when I look with dev tools, it seems to be outside the html. What could be causing this? I have already tried to set html and body to 100% width and overflow-x to hidden, but it did not help.

I have included a screenshot:

I have never seen anything like this before. What could it be? thanks verymuch!

ADDITION:

Here a live example:

example offline, sry

Answer 1

Somewhere, at some point, you have an element with some extra padding, border or margin that is blowing things out. I couldn't track it down, but an easy way to kill it off these days is with this in your style sheet (which is commonly used as part of a standard reset):

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

That seems to fix the issue, although on your next project, I recommend not setting fixed widths, but rather use width: 100% etc, as users on screens narrower than 300px will still have issues.

Answer 2

ok, so its a render issue on iphones and window phones. I cant replicate the issue on google chrome and samsung galaxy. Due to the below...

Put...

            <section id="main-top">
                <div id="bg">

inside the .container . You will have to re-assign your background. But the problem is with the nav and background and the positioning of these divs.

Your nav is full width but the container isn't, you have the section and div ending within the container but starts outside of it.