iPad in Horizontal Position & Klarna iFrame

[betterlead]

Hi, I have a web shop running on joomla, virtuemart and vmuikit. Shoppers visiting my site on an iPad have problem with the checkout. When an iframe loading "Klarna Checkout", with the iPad in horizontal position, the shoppers can't fill in any details asked for in the iframe.
Flipping the iPad into vertical position solves the problem, even after flipping it back to horizontal position, it mostly all works fine and shopper can proceed filling in details in the checkout.

I have been struggling with this for almost a year now, or maybe even longer, and nobody has come up with any solution. Some are blaming Apple for this and someone mentioned my theme, which is Yootheme Sixth Avenue.

So, has anybody heard of this before and even found a solution?


My site: https://livingstudio.se

[VMTemplates.net]

Hi,

it's well known problem. Iframes usually not working on iPads very well. There is a number of different solutions you can try however most of them requires coding. See below.

http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari
https://www.scirra.com/forum/solved-iframes-and-ios-devices_t89144
https://davidwalsh.name/scroll-iframes-ios
http://stackoverflow.com/questions/36820478/how-to-make-iframe-work-properly-in-ios-safari

Hope this will help.

Thanks,
Jason

[betterlead]

Many Thanks, I'll see if I can fix that. Would be best if it could be done with an override so I won't have to do it over and over again when updating VM.

Cheers
/Betterlead

[betterlead]

So, finally, I found it out on my own. Hope this will help anyone else experiencing the same problem.

Follow these steps to solve the problem when iframes are not responding to touch on iPad in landscape mode (Klarna Checkout, Press play on YouTube clips, entering text in dialogues, press buttons etc).

As an example for the Shopping Cart / Checkout Klarna iFrame

Create a menu item (Call it as you please, "Shopping-Cart" or in Swedish "kundvagn-kassa")
Select the Menu Item Type: "Shopping Cart"
Link will by default becomes something like: index.php?option=com_virtuemart&view=cart

If you don't want the menu published anywhere on the site, on the right hand in menu editor choose a hidden menu, ghost menu or whatever you call it in your admin. (If you don't have this menu yet, google and learn how to do it. It's very simple.)
Then save. Nothing more here to do.

Now, go to Extensions -> Modules -> and find the module: "VM - Search in Shop. Click on it. Click the tab assignment. Under Menu Items, look for the menu you put the menu item you created as above and exclude it.
Save.

Now you won't have any "Search box" on the checkout page, but the problem with none clickable/editable fields when an iPad is in horizontal view, will be gone. After all, one don't really need a search feature in the checkout.

I have the "Advanced Menu Manager" plugin installed and perhaps the step for excluding a menu item from certain pages could be different without it. But it's probably possible any way.
I hope this helps. It took me 6 months before I got this through my thick skull.
Good Luck.