Question

I’m using the following code.
By clicking on div id="popUpPane", the div and it’s childs should appear and slowly fade in.

By clicking on the div again, it should slowly fade out and then disappear.

Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on “popUpPane“.

Is this a bug in Safari or is there something I could change to come back to the intended behaviour?

One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There’s no transitions after that first one… If I delete the opacity-part in the java-script the opo-up works but there’s no transition.

All other transitions on my site are working. But they all use only opacity and no visibility.

Here’s my code:

CSS:

#popUpPane {
      white-space:normal;
      position:fixed;
      width:100%;
      height:100%;
      top:0;
      left:0;
      text-align:center;
      vertical-align:middle;
      visibility:hidden;
      z-index:90;
      }
 #greyOut {
      position:fixed;
      width:100%;
      height:100%;
      top:0;
      left:0;
      background-color:#000;
      opacity:0;
      }
#popUpPicCanvas {
      position:relative;
      top:50%;
      margin-top:-325px;
      display:inline;
      opacity:0;
      z-index:100;
      }
.fade {
      -webkit-transition: all .5s ease-in-out;
      -moz-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      }

HTML:

    <div id="popUpPane" onClick="noPopUp()">
    <div id="greyOut" class="fade"> </div>
    <canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel"      class="fade"></canvas>
    </div>

Javascript:

var popUpPane = document.getElementById("popUpPane"),
 greyOut = document.getElementById("greyOut"),
 popUpPicCanvas = document.getElementById("popUpPicCanvas"),
 popCanvasContext = popUpPicCanvas.getContext("2d");


var doPopUp = function(source,x,y){
      var popUpPic = document.getElementById("pic"+source);
      popCanvasContext.canvas.width = x;
      popCanvasContext.canvas.height = y;
      popCanvasContext.drawImage(popUpPic, 0, 0,x,y);
      popUpPane.style.visibility = "visible";
      greyOut.style.opacity = "0.7";
      popUpPicCanvas.style.opacity = "1";
};
var noPopUp = function(){
      greyOut.style.opacity = "0";
      popUpPicCanvas.style.opacity = "0";
      popUpPane.style.visibility = "hidden";
};

I hope someone can help me.

Thanks for your responds!

Answer 1

Yep, there is a bug in mobile Safari with simultaneous transition for opacity+visibility.

You can fix it using something except for visibility: in your case setting the width and height to 0 would help. However you must add the delay, so they would change not instantly.

Here is a dabblet with the working example: http://dabblet.com/gist/1642110

 /**
 * Delayed alternative for visibility
 */

a {
display: inline-block;
background: #888;
color:#FFF;
padding: 1em;
}

div {
width: 100px;
height: 100px;
background: lime;
transition: opacity 1s;
}

a:hover+div {
width: 0;
height: 0;
opacity: 0;
transition: width 0s 1s, height 0s 1s, opacity 1s;
}