CODEWITHSUNDEEP
cssmobilesafari
ShawnB
ShawnB

Reputation: 143

Mobile Safari white padding/margin on right

I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/

When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.

In landscape view, this scrolling isn't there and it renders as I'd like it.

I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?

Upvotes: 9

Views: 6694

Answers (4)

Kyle Werner
Kyle Werner

Reputation: 280

Just adding a border to some divs can cause the layout to change. Add this to the bottom of your css to find the rogue element:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Upvotes: 11

Gilad Barner
Gilad Barner

Reputation: 741

Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.

One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.

A different approach would be to run this JS code in the console to find them:

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.

You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.

Interestingly enough, this was only seen on iPhones, not on Androids.

Upvotes: 0

Marc Rabinowitz
Marc Rabinowitz

Reputation: 1

I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.

Upvotes: -4

Indranil
Indranil

Reputation: 2471

This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.

I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.

Upvotes: 2

Related Questions