Safariで不透明度と可視性を持つjavascriptでトリガされた遷移

Question

次のコードを使用しています。 divid="popUpPane"、divをクリックすると、それはチャイルズがフェードイン。

を再びdiv要素をクリックすると、ゆっくりと現れるとすべきだ、それはゆっくりとフェードアウトしてから消えるはずです。

FirefoxとChrome（ウェブキットも）はそのように動作し、以前のバージョンでSafariが実行したことがわかりました。しかし、SafariとSafari Mobileについては、「popUpPane」をクリックすると何も起こりません。

これはSafariのバグですか？または意図した動作に戻るために変更できるものがありますか？

1つ追加：-webkit-transitionを-webkit-transition: opacity .5s ease-in-out;に設定すると正常に動作しますが、移行は最初のクリックでのみ表示されます。最初のスクリプトの後にトランジションはありません... javaスクリプトでopacity -partを削除すると、opo-upが機能しますが、トランジションはありません。

私のサイトの他のトランジションは全て動作しています。しかし、それらはすべてopacityのみを使用し、visibilityは使用しません。

は、ここに私のコードです：

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"; 
}; 

私は、誰かが私を助けることができると思います。

あなたのお返事ありがとうございます！

Answer 1

モバイルサファリには、opacity + visibilityの同時遷移のバグがあります。

あなたはvisibility以外のものを使用してそれを修正することができます：あなたのケースで0からwidthとheightを設定するに役立つだろう。ただし、遅延を追加する必要があるため、即座に変更することはありません。ここで

は、実施例とdabbletです：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; 
} 

Answer 2

ありがとうございました！

ウェブキットの最新リリースからこのバグが削除されたため、SafariとChromeの問題は解決されました。私のdivの位置にも移行して以来、 私はので、私はこのようにそれを書いた問題を抱えているために開始しました：

.dofade { 
-webkit-transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
-moz-transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
-o-transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
}