Modal appears on Chrome/Firefox but not safari?

Question

I have a "a" tag labeled "shoe_tag" that links to a url, and the following js code below:

$(".shoe_tag").on('click', function() {

    tpos = $(window).scrollTop() + 300;
    myModal.open();
    $(".scotch-modal").css({top:tpos, position:'absolute'});


});

This code allows me to open a modal while the server responds, which normally takes about 4 seconds. On Chrome and Firefox, the modal will open while the browser waits for the server response, but on Safari no modal opens. However, if I put a debugger statement right at the end, then call "myModal.open()" in the web console, then the modal will appear. Its almost like Safari skips over this code unless I call it in the console. I've been researching Safari based stuff for over a week and am stumped, any ideas?

Answer 1

i think that it's a problem with the rendering pipeline of the browser, try showing the modal after a short time:

$(".shoe_tag").on('click', function() {

    var tpos = $(window).scrollTop() + 300;
    $(".scotch-modal").css({top:tpos, position:'absolute'});
    setTimeout(function(){myModal.open();}, 100);

});

Timers saved my life many many times ;-)

Answer 2

try

var tpos = $("body").scrollTop() + 300;

Webkit browsers always render window/html scrollTop as zero.