I have the solution and explanation for you: In 4.0.1 we made a changes in fab button scripts, which prevent it from default behavior. To achieve a desired result I suggest you to use following code: Button html:

<div id="modal-button">
    <a href="#top-section" class="btn-floating btn-large red" data-toggle="modal" data-target="#myModal">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>

Custom style for button above:

#modal-button {
    position: fixed;
    right: 23px;
    bottom: 23px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

Your modal (of course you can fill it up with the whatever content you want):

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                ...
            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>

Let me know if it works for you. Best,

---

Yes it is working now for you because i rolled back MDB 4.0.1 because the contact fab stopped working with that version. If i change from using the fab to using a button like your example it works, but the minute i use the fab it stops. I suspect it has something to do with the btn-floating class. Example

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-large waves-effect waves-light red"
        data-target="#modal-contact" data-toggle="modal"><i class=
        "material-icons">contact_mail</i></a>
    </div>

Jenda

---

Hi Jenmud, I have tested your website on Macbook, Ipad and few Iphones. Browser Safari, Chrome, Firefox, Opera . Your contact modal works fine everywhere. Is it possible for you to try it on other device?

---

Hi Michal, Just to let you know that I have rolled back MDB 4.0.1 as my contact floating fab stopped working on what appears to be in all browsers despite my original statement about it not working in only Safari. Since the roll back it is now working again in all browsers. Please advice. The code snippet above stays the same if you need to test it. Jenda.

---

Hi Michal, Thanks for the snappy reply. I must apologise up front as I am not a web developer and find myself out of my depth most of the time. The issue that I am having is for my wife's website (http://www.cuepilates.com.au) which is still a work in progress. The contact modal works fine on all mobile devices at this stage, and works fine in Firefox, and chrome, but I only noticed the other day that it is not working for me in Safari. Here is the modal code snippet

    <form action="/send", method="post">
    <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-large waves-effect waves-light red"
        data-target="#modal-contact" data-toggle="modal"><i class=
        "material-icons">contact_mail</i></a>
    </div>
    <!-- Modal Contact -->

    <div aria-hidden="true" aria-labelledby="myModalLabel" class=
    "modal fade modal-ext" id="modal-contact" role="dialog" tabindex="-1">
        <div class="modal-dialog" role="document">
            <!--Content-->

            <div class="modal-content">
                <!--Header-->

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

                    <h4 class="modal-title" id="myModalLabel">Write to us</h4>
                </div>
                <!--Body-->

                <div class="modal-body">
                    <p>Send a enquiry message.</p>
                    <br>

                    <div class="md-form">
                        <i class="fa fa-user prefix"></i> <input class=
                        "form-control" id="form22" type="text" name="name"> 
                        <label for="form42">Your name</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-envelope prefix"></i> <input class=
                        "form-control validate" id="form32" type="email" name="email">
                        <label for="form34" data-error="wrong">Your email</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-tag prefix"></i> <input class=
                        "form-control" id="form32" type="text" name="subject"
                        value="Enquiry">
                        <label for="form34">Subject</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-pencil prefix"></i> 

                        <textarea class="md-textarea" id="form8" name="msg">
                        </textarea>
                        <label for="form8">Message</label>
                    </div>

                </div>
                <!--Footer-->

                <div class="modal-footer">
                      <button class="btn btn-primary" type="submit">
                        Submit
                      </button>
                    <button class="btn btn-default" data-dismiss="modal" type=
                    "button">Close</button>
                </div>
            </div>
            <!--/.Content-->
        </div>
    </div>
    </form>

Also while I have your attention, not sure if you remember a while back I mentioned that the scroll on the rotated cards with mobile devices do not work very well. For example if you go to http://cuepilates.com.au/#about with your mobile device and rotate the Clare Mudron card, you will notice that scrolling the body is not easy to do, and is not obvious that you can scroll. Again I apologise for my beginner questions. Thanks Jenda.

---

Hi, can you provide a sample code? Modals work fine on all our apple devices (Macbooks, iPads and iPhones) so I cannot reproduce your error without your code.

---