Div scrollbar not working on ipad


I am developing a website for mobiles and tablets and have a few menus that slide in from the left, one of them is called ‘Most Popular’ and has a div with a dynamic list of hotels which have a scrollbar with a set height.

Mobile site

At the moment I have the css inline as below, but the scrollbar works fine in the browser of a pc, but doesn’t when tested on a ipad.

<nav id="menu3">
<!--Most Popular-->
<div style="position:relative; width:100%; height:auto; background:red; z-index:1;">
<div style="height:800px; text-align:center; background:white; overflow:scroll; z-index:10;">

I have another css issue, which you will see at the link above and that’s with the overlays Ihave on the set of images starting with ‘All inclusive’, they all match up fine, but when the one starts on a new line, the overlay with the title inside it, doesn’t follow it to the next line, that’s very frustrating too and cant solve it.

It seems to be empty. I don’t see any sliding in, and don’t really understand what the issue is.

I don’t see a sliding menu either.

You have a bad construct there and you need something like this.

.image {
    position: relative;
    z-index: 10;
    display: inline-block;
    width: auto;
.image h2{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;  
z-index: 20;
1 Like

Sorry guys, this is funny. There 5 coloured bars at the top of the page, the bottom one is called ‘Most Popular’ when you click the menu icon, does it not slide out, I just tested again on the ipad and its fine

Don’t know if this has anything to do width the issue, but the HTML contains 22 erros, most are duplicate IDs in “Most Popular”.

Hi ronpat, what do you use to see these errors, will have a look at them. But im sure the menu buttons work and on click they slide in

I’m using Firefox with the Firebug plugin. Show Source… and they are identified in the box at the bottom of the page. The HTML validator would identify them, too.


They don’t seem to slide on desktop browsers except for Safari mac (and they scroll up and down ok there). I can see them sliding on my ipad but as you say they don’t scroll.

I’m guessing its an issue with position:fixed/overflow once again as ios doesn’t like it much. However its not easy to debug and I would need to create a stand alone demo so I could strip it down to basics and see what ios doesn’t like The developer tools let you toggle styles on and off but I’ve had no luck in spotting anything simple.

OK thanks Paul, its frustrating isn’t it all the little issues between browsers on and off pc too.

I’ll keep looking into it too, but if you do think of something be sure to let me know lol. Your css fix also sorted out the overlay issue, so thanks for that

I changed it to this, as it seemed better, but still not working on ipad

<div style="position:relative; width:100%; height:100%; z-index:1; overflow:hidden;">
<div style="position:fixed; top:75px; left:0; width:100%; height:100%; background:#EEE; overflow:auto; z-index:10; text-align:center;">

Will keep trying

I got it working, don’t ask me how, I just stumbled across it -

<div style="position:absolute; left:0; top:10px; bottom:1px; width:100%; z-index:11; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch;">
<div style="position:absolute; top:75px; left:0; width:100%; height:100%; background:#EEE; overflow-y:scroll; overflow:-x:hidden; z-index:9999; text-align:center;">

It was probably the position:relative with a 100% height that was causing the issue as the height would probably collapse.

You seem to have too many nested containers when essentially the scrollbar should be on the fixed element itself which should be sized to the viewport. The inner containers would then need no positioning at all.

However, seeing as you have it working I would leave it well enough alone :slight_smile:

Ye I see what you mean, will have a go and see if it works, but at least I got it working now.

Thanks again Paul, and for the other fix too

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.