Fancybox hard to see on Safari

Question

I am using fancybox with latest jquery.min.js version 3.3.1, jquery.fancybox.css version 3.5.7 and jquery.fancybox.pack.js version 3.5.7.

It's working fine on all browsers except Safari. On Safari div content looks almost semi-transparent but when I click on stop then starts working fine like on other browsers.

<!docktype html>
<html lang=“no”>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src=“PATH/jquery-3.3.1.min.js"><\/script>')
  </script>
  <link rel="stylesheet" href=“PATH/jquery.fancybox.css " type="text/css " media="screen" />
    <script type="text/javascript " src=“PATH/jquery.fancybox.pack.js">
  </script>
</head>
<body>
  <div id="waitanim" style="display:none; background-color: #fff">
    <img src="/img/spinner.gif" />
    <div>Searching …</div>
  </div>
  <form name="form1" id="form1" method="GET" action=“some action” onSubmit="$('#waitanim').show();$.fancybox({'modal': true, 'href': '#waitanim'});" style="padding:0">
    <input type="submit" class="button-brand" id="showtot" name="showtot" value="Search" />
  </form>
</body>
</html>

Firstly there is no jQuery v3.3.7 (yet). Secondly, this sounds like an implementation problem on your end, so to help you debug it we would need to see an example of the code which demonstrates the issue. — Rory McCrossan, Mar 20 '19 at 10:02
yes, you are right, but I meant jQuery 3.3.1. I try to post code example. — javed, Mar 20 '19 at 10:04
You are saying its hard to see yet you don’t upload the image of it... — Dino, Mar 20 '19 at 12:24
Yes, I upload the image when I click on submit button: onSubmit="$('#waitanim').show();$.fancybox({'modal': true, 'href': '#waitanim'});" — javed, Mar 20 '19 at 12:33

score 0 · Answer 1 · answered Mar 22 '19 at 15:21

I have solved the issue, I am not using fancybox any more, instead css:

<div id="overlay" style="display:none">
    <div id="waitanim">
        <img src="spinner.gif" />
        <div class="message">Searching ...</div>
    </div>
</div>

CSS:

div#overlay.show {
    display: block !important;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
div#waitanim {
    text-align:center;
    margin: auto;
    padding:20px;
    border: 1px solid #888;
    width: 40%;
    min-width: 300px;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 10px 10px 50px black;
}
div#waitanim div.message {
    font-weight:bold;
    font-size:16px;
    margin-top:30px;
}

score 0 · Accepted Answer · answered Apr 15 '19 at 11:19

The issue is with Safari behavior which is different than other browsers. Upon submiting a form where user is being navigated from page-1 to page-2, Safari does this job very quickly and takes the user to page-2 immediately. This way Safari considers that user is on Page-2 and fancybox was for Page-1, so no need to display Fancybox on page-2.

Fix for the issue is to inform Safari: first display Fnacybox and then submit the form. So I edited submit button like:

<input type="button" class="button-brand" onclick="openModelandSubmit();" id="showtot" name="showtot" value="Search" />

<script type="text/javascript">
    function openModelandSubmit() {

        $('#waitanim').show();$.fancybox({'modal': true, 'href': '#waitanim', afterShow: function() {   $('#form1').submit();} });
    };

This fixed the issue nicely.

Fancybox hard to see on Safari

2 Answers2