CODEWITHSUNDEEP
jqueryioshtmljquery-mobilemobile-safari
Brian Colavito
Brian Colavito

Reputation: 891

Why would my page div grow forever on ios (only)?

I have this weird situation where the page div of my document grows and grows forever. I've seen this in iOS 5.1 and 6 on iPhone. You can sit in the safari webkit debugger and watch the value of height and min-height go up and up, and the background image gets bigger and bigger. Look at the value of min-height in the effective div, below. That value will increase until I leave or refresh the page:

<div id="divMain" data-role="page" data-cache="false" data-theme="c" data-url="divMain" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 4591px; ">

Note that I am not setting that style attribute, it's getting set somehow by jQuery or jQuery Mobile. I see this a lot but don't understand how or why this happens. Here is my source HTML for that div:

<div id="divMain" data-role="page" data-cache="false" data-theme="c">

I can't submit all the code this depends on, but I can offer two pieces of data. First, if I uncheck the display:block setting in the debugger, which comes from jquery.mobile-1.1.0.min.css, the problem stops:

.ui-mobile .ui-page-active {
display: block; /* uncheck to disable this, and the problem stops */
overflow: visible;
}

Second, (I think this is related to the problem, but I'm not sure), this page is wrapped in an outer iframe. If I go into the CSS for the page that hosts the iframe, there is this line:

iframe { display: block; height: 100%; width: 100%; overflow: auto; border: none; }

If I comment this out, the problem goes away (but the page looks all wrong). As far as I can tell, there's no javascript code mucking up the page size or size of any of the divs.

Lastly, here is the computed style of this element, according to the debugger:

-webkit-tap-highlight-color: 
rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
background-attachment: scroll;
background-clip: border-box;
background-color: 
rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: 
rgb(51, 51, 51);
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: 
rgb(51, 51, 51);
border-left-style: none;
border-left-width: 0px;
border-right-color: 
rgb(51, 51, 51);
border-right-style: none;
border-right-width: 0px;
border-top-color: 
rgb(51, 51, 51);
border-top-style: none;
border-top-width: 0px;
color: 
rgb(51, 51, 51);
display: none;
font-family: Helvetica, Arial, sans-serif;
height: auto;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 38819px;
outline-color: 
rgb(51, 51, 51);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
text-shadow: 
rgb(255, 255, 255) 0px 1px 0px;
top: 0px;
width: auto;

Upvotes: 2

Views: 901

Answers (1)

Aaron
Aaron

Reputation: 1083

Try putting a containing div around the iframe.

<div class="container">
    <iframe src="http://mydomain.com"></iframe>
</div>

<style type="text/css">
.container{
    position: absolute; 
    top: 0px; 
    left: 0px;
    right: 0px; 
    bottom: 0px;
}
</style>

Upvotes: 2

Related Questions