Scrolling iframes & hover drop downs not working on touch devices

[JoTidman]

Hi all, I’m new to this and currently writing a site from scratch. I’ve got a few glitches but I’ll start with these two problems!
This is my site currently in test stage, hence the images are missing.

http://www.rockclick.co.uk/wiss/index.htm

I’ve got iframes which scroll fine on desktop browsers, but on my iphone when I tested it, the main iframe doesn’t scroll and therefore fits all text in the frame and stretches my background picture as a result (see the “news” page).
I’ve tried various codes that I googled and can’t seem to get it working. So before I go down the Mobile App route can this be fixed?

I am aware as well that the hover drop down menus don’t go away when you touch on them on the mobile device as well.

Are there any easy fixes to these?
Important note: I’m fairly new to writing CSS and HTML and so answers in simple English would be very nice so that I can understand. Thanks all!

[Shikkediel]

Have you tried this approach?

https://davidwalsh.name/scroll-iframes-ios

As far as I know, there is no simple fix for the hover effect…

[Beverleyh]

Try this sticky hover fix http://blog.fofwebdesign.co.uk/31-ios-sticky-hover-fix-unhovering-dropdown-css-menus

[JoTidman]

Thank you so much Beverleyh – this worked a treat for the hover menus! Much appreciated :-)

[JoTidman]

Ah, I just noticed another problem on the hover menus sticky fix. The sub menus aren’t working at all now. Is there a fix for that?

[Beverleyh]

I can’t see much on mobile but it looks like only the first level drop-downs are triggered by :hover CSS. The sub-menus are activated with JavaScript. For the sticky hover fix to work, the sub-menus would need to be activated via :hover CSS too. From memory, when I looked at the menu before on mobile (iPhone/iPad) the sub-menus didn’t work then either. I just assumed you hadn’t got that far with development.

[Beverleyh]

If it helps, here’s a CSS-only multi-level dropdown menu tutorial. It works on mobile https://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

It isn’t responsive, but neither is your site. If you want a responsive CSS-only multi-level dropdown menu at some point, try this http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-drop-down-menu.htm

[JoTidman]

Yeah I know the sub menus aren’t hoverable. Wasn’t sure how to do that without a complete menus-submenus re-write ;-(
I’ll check your links out. I’ve fixed my two initial problems and my site is now readable on the iphone! Thanks. I’ll be back I’m sure!

[Shikkediel]

Would be nice to share what was causing the scrolling issue.

[JoTidman]

It’s an IOS glitch. This is the extra piece of CSS I added which fixed it:
NB the width and height are for my iframe sizes. These can obviously be changed for your own size.

    .scroll-wrapper {
        display: inline-block;
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
    }
    .scroll-wrapper, .scroll-wrapper  {
        width: 100%;
        height: 500px;
    }

[JoTidman]

Just to let anyone know who stumbles across this thread I used these fixes regarding the multi level drop downs (sub menus I call them!):

#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {display: block;}

And added this as javascript

document.addEventListener(‘click’, function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf(‘has-submenu’) > -1) {
e.target.classList.toggle(‘open’);
}
}, false);

(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS

It now works fine :-)

[Shikkediel]

Thanks for the updates. If I’m not mistaken, the function at the bottom reads the same as this:

document.addEventListener('touchend', function() {});

[Author]

Posts