Modal and Safari issues


Registered User
42 posts

Hi,
I have an issue with a contact form loaded in a Modal reveal window. It displays fine on every device I have tried so far, except Safari running Iphones. There the form does not scroll down. It gets stuck in the middle and the send button is not accessible. Is there a compatibility issue? Any way to fix this, short of not using Modal?

This is the link to my page http://www.orphelion-ensemble.com.

Kind regards
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
RSD 2, RED


Registered User
1,560 posts
Online Now

we could do with seeing either your project file or the page where the trigger for the modal window is located
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com


Registered User
42 posts

The trigger is the fixed mail/contact button.
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
RSD 2, RED


Registered User
430 posts

Beastro wrote:
Hi,
I have an issue with a contact form loaded in a Modal reveal window. It displays fine on every device I have tried so far, except Safari running Iphones. There the form does not scroll down. It gets stuck in the middle and the send button is not accessible. Is there a compatibility issue? Any way to fix this, short of not using Modal?

This is the link to my page http://www.orphelion-ensemble.com.

Kind regards
Berthold


I did recreate the fixed nav container html you have and found that the Modal does work with regular html, video element (has iframe), or a html element with regular html. All the tests required the user to scroll the modal container when it was fixed at the bottom and worked as it should. I was not able to fully test a Web Builder Form but think the problem may be related somehow to the form setting for the iframe of the form ? Not an area I can speak to at all so I will let others with many more years of experience and knowledge help. I do notice no scrolling is set on the form iframe however I would not have a clue where to adjust that setting.
Break on through to the other side


Registered User
430 posts

There may be a conflict with the touch event on iphone and the inputs on the form which would explain why the scrolling works for other content but not a form.

Try adding this additional line to Alter Eagles Reveal Repair in the Head:


<style>
/* ==== REVEAL REPAIR ==== */
body.is-reveal-open {
overflow: visible !important;
}
.reveal-overlay {
overflow: hidden;
}
html,body{
-webkit-overflow-scrolling : touch !important;
}
</style>
Break on through to the other side


Senior Advisor
11,003 posts
Online Now

I checked the form right now. You may have fixed it already, then I was able to scroll it.
Something you could do to make it shorter, is to make the comment text-area less high. If people write more than what fits in, they will get a scroll bar there anyway.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Registered User
42 posts

Hi again,

Yes, I guess Alter Eagles Reveal Repair must have done the trick, as it seems to work now on all devices! Thanks a lot!
I noticed that opera does not deal well with Flexbox designs. Should I care about that or is it safe as of today to design layout with flexbox?

Best regards
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
RSD 2, RED

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.