iframe popup scrolling on iOS mobiles

[jtshighslide]

I am having a problem with iframe popups on iOS mobiles (iPad specifically). The content does not scroll. I have looked at the solution by roadrash, and have confirmed that the test file at http://www.roadrash.no/hs-support/test/m.html works on my iPad. However, when I attempt to use the same code modifications contained in that test file (or that in her js.fiddle area) in a test file on my website, the iframe-scroll issue remains. My test file is at http://www.usafaclasses.org/1960/popup_test_2.html. I'd appreciate help finding the issue.

[MisterNeutron]

This is just a hunch, but one thing I'm struck by is that your page is HTML 5 (well, sort of - it's got a bunch of deprecated stuff in it), but your iframed page is HTML 4.01 Transitional, a true dinosaur. And even for HTML 4.01 Transitional (which dates to almost 20 years ago), it's kind of a mess - tables used for layout, mountains of unnecessary CSS, etc.

I think that as a first step, I'd clean up both pages, and make sure they validate as HTML5.

(BTW, the old Highslide JS examples are all XHTML, which is also a relic of a bygone era.)

[MisterNeutron]

One more thing - always use highslide-full.js, rather than any of the subset scripts, like highslide-with-html.js. It will save you all sorts of heartache. Please just trust me on this one.

[jtshighslide]

Thanks for the critique. Sadly, I'm an aging (80+) amateur at this, and I have neither the knowledge nor the skills nor the longevity to bring this old site up to the level you recommend. It is the product of numerous shepherds over the years and exists to serve a small group of old guys like me who had the privilege of attending the U.S. Air Force Academy as its second graduating class.

That said, I have tried to clean up the files a bit--all to no avail. Everything works just fine in the Windows world, but the scrolling issue remains for the iframe popup on the iPad/iPhone. I have looked for differences in the code between my test file and the demo file, and I can't spot any. Perhaps your eye is sharper than mine.

Could there be an issue with the version and/or the configuration of Highslide that is installed on the server?

Thanks for your help and your patience.

[MisterNeutron]

Yes, I did a bit of looking around at your site, and recognized the symptoms of something cobbled together by various hands, over many years. Tough to bring it up to date without doing a lot of "slash and burn!"

I don't have an iPad to test with - I've got a Win10 desktop, a Macbook Air laptop, and an Android phone. But I've discovered that your page fails in Safari on my Macbook, so I can probably zero in on what's killing it. Just heading out at the moment, but I'll come back to this later today and do some tests, now that I have an easy way of experimenting.

[fisozeb]

Yes, I did a bit of looking around at your site, and recognized the symptoms of something cobbled together by various hands, over many years. Tough to bring it up to date without doing a lot of "slash and burn!"

I don't have an iPad to test with - I've got a Win10 desktop, a Macbook Air laptop, and an Android phone. But I've discovered that your page fails in Safari on my Macbook, so I can probably zero in on what's killing it. Just heading out at the moment, but I'll come back to this later today and do some tests, now that I have an easy way of experimenting.

It gives me the same problems on my Apple MacBook Pro

[MisterNeutron]

Bad news. I knew this day would come eventually, the day when a browser change would "break" Highslide JS, and since it's abandonware, it would never be fixed. Remember, the last substantive update to this script dates back over 8 years, and even that was just a minor tweak.

It turns out that even Roadrash's old demo page doesn't work properly in Safari. I put together a very "clean" test of this kind of iframe expander, using only HTML 5, with the same result. In all three cases (Roadrash's page, your page, my page), the scrolling worked only if I first "poked" the expander, either by shrinking or enlarging it (using the little resizer at lower right), or if I dragged the window by the header, even just a short distance. After that, lo and behold, scrolling works again.

I'll keep tinkering with it, just to see if there's one particular parameter that's kicking it in the butt, but I'm not hopeful.

This is why I stopped using Highslide JS a couple of years ago, and started using Floatbox, which is actively maintained. But that's not a simple "swap-out, swap-in" replacement - the page coding is completely different.

[MisterNeutron]

Bad news confirmed. I set up a completely stripped-down, all-defaults test case, and it fails in Safari. I even tried some old tricks involving using jQuery to force the browser focus to the iframe after the expander opens, but it made no difference.

Some future release of Safari might magically cure the problem, but I wouldn't hold my breath.

[jtshighslide]

Thanks. I have done some experimenting with the highslide loading. By changing all of the loading statements to reference the highslide server vice the server for our site, the problem went away. I then downloaded new version 5 files just to be sure I wasn't dealing with a corruption problem. I then returned all of the loading statements back to "my" server. The result was that even with the restored files, the problem reappeared. So, one-by-one, I changed the loading references back to the highslide server. Nothing changed until I got to the statement for the highslide.config.js. Changing that to reference the highslide server started things working again. Hmmm? I left that statement alone and returned the others to referencing "my" server. Things still worked on the iPad. I then commented out the config file statement, and things continued to work on the iPad. Conclusion: something is amiss with the config file, but apparently it isn't really needed in this case.

I also looked at the mobile.js file and noticed that it essentially did the same thing as the overrides used in RR's examples. So I took out the overrides and loaded the mobile.js instead. The problem reappeared! I looked closer at the mobile.js file and discovered that iPad was not one of the condition parameters in the IF statement. When I added the iPad to the IF statement, the problem went away. Yay!

While I was writing this, I noticed your recent responses regarding desktop Safari's not working. Just a thought, but maybe adding iMac to the conditions in the IF statement would fix that too. Unfortunately, I don't have an Mac; so, I can't test that notion.

Thank you so much for taking the time to help chase this down. With luck I can now dig this grimlin out of the iframe popups in the actual site content. The site will remain "ugly," but with luck it will at least work for iOS mobile users. Regards.

[MisterNeutron]

Well, in Safari on a Macbook, none of that helped. My test had no highslide.config.js file at all - it was using just the script defaults. And my calling page and iframed page were both absolutely clean, stripped-down, fully valid HTML 5. So while you may be seeing things working on your iPad, anyone using Safari on a Mac is going to have problems. A Mac user always has the option of using Chrome or FIrefox, instead of Safari, though I gather most Mac users stick to Safari.

At the very least, download the last Highslide JS release, 5.0.0, and use those files on your server. No big changes, and no need to change anything on your pages that use Highslide JS, but you might as well stick to the best available.

http://highslide.com/download.php

[jtshighslide]

Strangely, it is now stopped working on the iPad after a friend had success on an iPhone. Really weird. Okay. I'll be sure that I have the latest files (again). Thanks for your help.

[fisozeb]

Thank for help