Menu icon Foundation

Developer | Vancouver, BC

I've been developing websites since 1999.

My Posts



My Comments

John L commented on Scot Nery's post over 2 years

Almost a year ago now, we encountered another problem with the Reveal modal on the same device that might be in some way related. You can read about it in this thread: http://foundation.zurb.com/forum/posts/37302-reveal-modal-opens-beneath-overlay.
In that case, Foundation Forum member Joel Carlos reported that moving the Reveal code as close to the opening body tag as possible fixed the problem for him. I'm going to try the same thing with this website, and then wait to see what the testers report back. If they report that it has fixed the problem, I'll let you know.

John L commented on Scot Nery's post over 2 years

I believe Scot is correct about this bug with the Reveal modal on the iPad. I've also had similar reports by testers using the iPad Pro on a website I am sometimes working on.
Unfortunately, I am unable to test it myself because I don't have the device, and any online browser/device simulator I've used has been unable to produce the glitch. I have attached a screenshot that someone sent to me, though, and it looks very similar to Scot's.

John L commented on John L's post over 3 years

Thanks Adrian, your fix worked perfectly.

I think this fix will be helpful to a lot of people, at least until Foundation 6 is released with this as its default behavior.

John L commented on John L's post over 3 years

I'm on a PC, and the jump can be seen in both Firefox and Chrome.

This seems to be new to Foundation 6 because I developed two websites in Foundation 5 and didn't observe this behavior with the modals.

John L commented on John L's post over 3 years

Oh, I forgot to mention that you need to be using Chrome as your browser to see this bug in action.

John L commented on John L's post over 3 years

Thanks for taking a look into my issue, Brian.

Actually, I have all the current Foundation files there now and the problem is still the same. I also don't think removing the overlay entirely is an acceptable solution since one of the main reasons to use these modals is for the darkened background effect. That is if adding overlay:false is actually going to remove the darkened background as I am assuming.

Anyway, if anyone is interested in seeing the bizarre behavior of Foundation modals, I invite you to go to http://dominet.ca/eq/how-it-works.html with an iPad and click the top "See The Doctor" button to see how the modal is white as expected, and then scroll down and click the green "See The Doctor" button and watch how the darkened background now goes ON TOP of the modal.

But wait! Now try going to the index page at http://dominet.ca/eq/index.html, and the same thing happens, but I noticed something else. The modal switches from working properly to not working properly just with a bit of scrolling. While you are still in the area below the hero image with the green "See The Doctor" button, scroll up a bit more so that the hero image is a bit visible, and the modal opens as white again. Is it messing up because of the background colors that happen to be there or because of the distance from the top of the screen? I don't know, but it might be something worth looking into.

John L commented on John L's post over 3 years

One other thing I just noticed is when I'm using the iPad mini, if I launch the modal in portrait mode the modal window is nice and white, but when I rotate it to landscape mode, it darkens. It goes back and forth from dark to light each time I rotate. What's up with that?

John L commented on John L's post over 3 years

I just wanted to add that the page at the link provided is using the Foundation 6 framework.

Here is the code for the button that opens the window properly at the top of the page:

<a data-toggle="MedeoConnect" class="button button-switch1a" ontouchend="this.onclick=fix">See The Doctor</a>

And here is the code for the button that opens the darkened modal at the bottom of the page:

<a data-toggle="MedeoConnect" class="button" ontouchend="this.onclick=fix">See the Doctor</a>

And here is the reveal modal code that is triggered:

<!-- For connecting to Medeo -->
        <div class="large reveal" id="MedeoConnect" data-reveal data-close-on-click="false">            
            <div class="reveal-content">
                <h3>Connecting You to Medeo</h3>
                <p>EQ Virtual uses Medeo technology for bank grade encryption.</p>
                <p>Once you're signed in, you'll be connected with an EQ Virtual Care Manager.</p>

                <img src="img/medeo-connect.png" class="fw-image" />

                <div class="expanded buttons clearfix">
                    <a href="javascript: void();" class="button alt float-left" ontouchend="this.onclick=fix">Sign In</a>
                    <a href="javascript: void();" class="button float-right" ontouchend="this.onclick=fix">Sign Up</a>              
                </div>

                <button class="close-button" data-close aria-label="Close reveal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>            
        </div>

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Scot Nery's post over 2 years

Almost a year ago now, we encountered another problem with the Reveal modal on the same device that might be in some way related. You can read about it in this thread: http://foundation.zurb.com/forum/posts/37302-reveal-modal-opens-beneath-overlay.
In that case, Foundation Forum member Joel Carlos reported that moving the Reveal code as close to the opening body tag as possible fixed the problem for him. I'm going to try the same thing with this website, and then wait to see what the testers report back. If they report that it has fixed the problem, I'll let you know.

You commented on Scot Nery's post over 2 years

I believe Scot is correct about this bug with the Reveal modal on the iPad. I've also had similar reports by testers using the iPad Pro on a website I am sometimes working on.
Unfortunately, I am unable to test it myself because I don't have the device, and any online browser/device simulator I've used has been unable to produce the glitch. I have attached a screenshot that someone sent to me, though, and it looks very similar to Scot's.

You commented on John L's post over 3 years

Thanks Adrian, your fix worked perfectly.

I think this fix will be helpful to a lot of people, at least until Foundation 6 is released with this as its default behavior.

You commented on John L's post over 3 years

I'm on a PC, and the jump can be seen in both Firefox and Chrome.

This seems to be new to Foundation 6 because I developed two websites in Foundation 5 and didn't observe this behavior with the modals.

You commented on John L's post over 3 years

Oh, I forgot to mention that you need to be using Chrome as your browser to see this bug in action.

You commented on John L's post over 3 years

Thanks for taking a look into my issue, Brian.

Actually, I have all the current Foundation files there now and the problem is still the same. I also don't think removing the overlay entirely is an acceptable solution since one of the main reasons to use these modals is for the darkened background effect. That is if adding overlay:false is actually going to remove the darkened background as I am assuming.

Anyway, if anyone is interested in seeing the bizarre behavior of Foundation modals, I invite you to go to http://dominet.ca/eq/how-it-works.html with an iPad and click the top "See The Doctor" button to see how the modal is white as expected, and then scroll down and click the green "See The Doctor" button and watch how the darkened background now goes ON TOP of the modal.

But wait! Now try going to the index page at http://dominet.ca/eq/index.html, and the same thing happens, but I noticed something else. The modal switches from working properly to not working properly just with a bit of scrolling. While you are still in the area below the hero image with the green "See The Doctor" button, scroll up a bit more so that the hero image is a bit visible, and the modal opens as white again. Is it messing up because of the background colors that happen to be there or because of the distance from the top of the screen? I don't know, but it might be something worth looking into.

You commented on John L's post over 3 years

One other thing I just noticed is when I'm using the iPad mini, if I launch the modal in portrait mode the modal window is nice and white, but when I rotate it to landscape mode, it darkens. It goes back and forth from dark to light each time I rotate. What's up with that?

You commented on John L's post over 3 years

I just wanted to add that the page at the link provided is using the Foundation 6 framework.

Here is the code for the button that opens the window properly at the top of the page:

<a data-toggle="MedeoConnect" class="button button-switch1a" ontouchend="this.onclick=fix">See The Doctor</a>

And here is the code for the button that opens the darkened modal at the bottom of the page:

<a data-toggle="MedeoConnect" class="button" ontouchend="this.onclick=fix">See the Doctor</a>

And here is the reveal modal code that is triggered:

<!-- For connecting to Medeo -->
        <div class="large reveal" id="MedeoConnect" data-reveal data-close-on-click="false">            
            <div class="reveal-content">
                <h3>Connecting You to Medeo</h3>
                <p>EQ Virtual uses Medeo technology for bank grade encryption.</p>
                <p>Once you're signed in, you'll be connected with an EQ Virtual Care Manager.</p>

                <img src="img/medeo-connect.png" class="fw-image" />

                <div class="expanded buttons clearfix">
                    <a href="javascript: void();" class="button alt float-left" ontouchend="this.onclick=fix">Sign In</a>
                    <a href="javascript: void();" class="button float-right" ontouchend="this.onclick=fix">Sign Up</a>              
                </div>

                <button class="close-button" data-close aria-label="Close reveal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>            
        </div>

Posts Followed


Following

  • No Content

Followers

  • No Content