1
私は自分のウェブサイトのための左右のスイング「ドア」を備えた簡単なナビゲーションコンポーネントを構築しました。これらの機能はSafariを除くすべてのブラウザで機能します。Safariでは、マウスがあるドアから別のドアに移動したときに「ドア」がその背景に完全に消えているようです。青いドアに触れる前にアニメーションが停止するのを待っている限り、一度に1つのドアをマウスで操作すると問題はありません。CSS3 3DアニメーションSafariで消える
また、私のサイトの1ページには背景ビデオが固定されており、そのページではアニメーションが全く機能しません。あなたが上に移動するとすぐに部門全体が消えます。
私はかなりの間、この問題に取り組んできましたが、この奇妙な動作の理由を考えることはできません。私がブートストラップグリッドに入れないでアニメーションを実装すると、動作しますが、バックグラウンドビデオが関与すると、このコードブックで見られるのと同じ問題が発生します。
なぜこれが起こっているのか、ご意見ありがとうございます。
HTML：
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 greenbackground">
<a href="#">
<div class="greenlink doorleft">
<h1>Left Swing Link</h1>
</div>
</a>
</div>
<div class="col-xs-6 bluebackground">
<a href="#">
<div class="bluelink doorright">
<h1>Right Swing Link</h1>
</div>
</a>
</div>
</div>
</div>
<body>
CSS：
.greenlink{
width: calc(100% + 30px);
padding-top:5em;
padding-bottom:5em;
text-align:center;
background-color: lightgreen;
margin-left:-15px;
}
.greenbackground{
background-color: green;
}
.bluelink{
width: calc(100% + 30px);
padding-top:5em;
padding-bottom:5em;
text-align:center;
background-color:lightblue;
margin-left:-15px;
}
.bluebackground{
background-color:blue;
}
.doorleft{
transition: all 500ms ease;
transform: perspective(900px) rotateY(0deg);
transform-origin: 0% 0%;
-webkit-transform-style: preserve-3d;
}
.doorleft:hover {
transform: perspective(1000px) rotateY(30deg);
}
.doorright {
transition: all 500ms ease;
transform: perspective(900px) rotateY(0deg);
transform-origin: 100% 0%;
-webkit-transform-style: preserve-3d;
}
.doorright:hover {
transform: perspective(1000px) rotateY(-30deg);
}
はここcodepenへのリンクです：https://codepen.io/anon/pen/RgBdJp
これは問題の一部を修正しますが、バックグラウンドビデオが関わっているときはいつでも、完全にうまくいきます。私はそれがバックグラウンドビデオとは別のバグだと考え始めているので、私はこの答えを受け入れるだろう。 – Ryan