Modal with animation on Safari doesn't display


Topic: Modal with animation on Safari doesn't display

chiplueck asked 5 years ago

The following modal:

<mdb-modal :show="modal" @close="modal = false"
               class="animated bounceInLeft"
               info position="top-center"
               size="lg"
    >
        <mdb-modal-header>
            <mdb-modal-title>Modal title</mdb-modal-title>
        </mdb-modal-header>
        <mdb-modal-body>...</mdb-modal-body>
        <mdb-modal-footer>
            <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
            <mdb-btn color="primary">Save changes</mdb-btn>
        </mdb-modal-footer>
    </mdb-modal>

...works fine in Chrome. In Safari, you can see that the animation starts. Sometimes the modal appears briefly before disappearing. Other times you see a quick flicker, but no modal at all. Inspecting with Safari's developer tools shows that the modal is there, but it appears to be behind the main content instead of on top. Taking off the animation makes the modal appear.


Mikołaj Smoleński staff commented 5 years ago

Thanks for reporting that issue. We will be working on fixes soon. The issue was added to our list of bugs.

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.4.0
  • Device: MacBook Air
  • Browser: Safari
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No