Jump to content
Sign in to follow this  
basbebe

Javascript-Triggered Transitions With Opacity And Visibility In Safari

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...