3

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. No scrollbars on google chrome

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 ;)

enter image description here

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

Community
  • 1
  • 1
chepe263
  • 2,774
  • 22
  • 38

2 Answers2

2

Take a look at this: How to get the scroll bar with CSS overflow on iOS perhaps the property -webkit-overflow-scrolling: touch that's mentioned would help you.

Community
  • 1
  • 1
HMartch
  • 728
  • 3
  • 12
  • i added to the css -webkit-overflow-scrolling: touch but not sure how it would work since there's no ipad arround for testing T_T – chepe263 Apr 13 '12 at 18:53
1

simple solution (not what i wanted....)

set the body height == container height

jQuery('body').css('height', jQuery('#contenedorPrincipal').css('height'))
chepe263
  • 2,774
  • 22
  • 38