The height of the Google Maps is getting bigger and bigger

[Simplissite]

Hello,

I am using Trusted 1.7.2 theme and am happy with it.

However, I have a problem on Safari on iPhone with the Google Maps that I inserted in the pages and the footer. Their height lengthens endlessly, making it impossible to continue reading below!

My WordPress version 5.4.2. By disabling extensions, the problem is still there. With other themes, no problem.
I can’t find where it can come from.
The site : https://canoe-valdallier.fr/

Thank you in advance for your help.

[Andy]

It looks okay when I view your site, but you could try adding this code to ‘Additional CSS’ or in your child theme:

iframe {
    max-height: 480px !important;
}

[Simplissite]

Thanks for your help.
The problem persists with this code.
Maybe my version of Safari is too old. Have you tested on Safari on iPhone? Does it work?

[Andy]

Yes it works fine when I view your site.

I also managed to test it using an emulator to simulate a really old version of safari, and this too was okay.

Sorry, I don’t know what would cause the issue that you have described.

Are you manually adding the Google maps iframe to the page? If so, have you tried a dedicated maps plugin to insert the map. It might be worth trying as a plugin would be designed to handle this.

Is it the same issue as described here: https://stackoverflow.com/questions/34320046/iframe-height-issues-on-ios-mobile-safari ?

[Simplissite]

Thank you. I will try monday…

[Simplissite]

Hello,
Great! Thanks a lot for the tip.
Indeed, adding scrolling=”no” in the iframe solved my problem.
<iframe scrolling=’no’ src=’content.html’>

[Andy]

Thank you for the update. Glad to hear you got it sorted, I completely missed the no scrolling variable.

[Author]

Posts