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.
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.
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
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.
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