Question

I’m creating a site for a client. The design has an ipad and the content would show inside the screen. It was pretty fine till they ask me to change it since overflow CSS property doesn’t work really good on ipads (They told me that).

The content change dynamically. After a minute or so, i show a div with lot of text. The scrollbars are not showing so the user won’t be able to move.

After pressing F12 the console shows up and if i press it again, the console hides and the scrollbars appears.

This is the html

http://pastebin.com/9PkyeaVr

The CSS

http://pastebin.com/e0YMfxLM

I tried to set the overflow properties on the css sheet and also when the div with questions shows up.

The questions are generated with vb.net on load. I’m using jQuery to manipulate the DOM.

Any ideas helps! …or maybe someone knows how to make the overflow: scroll; works on an ipad. Somebody told me this works when you use 3 fingers but some people don’t know about it.

btw, i did my research and everything 😉

I checked if this happens on IE, Firefox. Chrome and Safari has the problem.

Answer 1

simple solution (not what i wanted….)

set the body height == container height

jQuery('body').css('height', jQuery('#contenedorPrincipal').css('height'))