web-dev-qa-db-ja.com

CSS変換がEdgeで機能しない

次の問題で行き詰まっています。

私が作成したこのサイト では、ページの下部にギャラリーがあります。親指の上にマウスを置くと、彼らは狂ったように飛び回ります。これは私が望むものではありません。他のブラウザの魅力のように動作します。 Microsoft Edgeのみが影響を受けます。

誰かが画像を期待どおりに動作させるのを手伝ってくれる？

CSSは次のようになります。

.node-gallery {
   float: left;
   width: 150px;
   height: 150px;
   position: relative;
   margin: 0 60px 50px 0;
}

.node-gallery img {
   position: absolute;
   bottom: 0px;
}

.node-gallery .image1 {
   left: 0px;
   z-index: 3;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -o-transition: all 0.2s ease
}

.node-gallery .image2 {
   left: 7px;
   height: 148px;
   z-index: 2;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -o-transition: all 0.2s ease
}

.node-gallery .image3 {
   left: 14px;
   height: 145px;
   z-index: 1;
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -o-transition: all 0.2s ease
}

.image1, .image2, .image3 {
   border: 5px solid #F3F3F3!important;
   box-shadow: 1px 1px 2px #666;
   -webkit-shadow: 1px 1px 2px #666;
   -webkit-transform: rotate(0deg) translate(0px);
}

.node-gallery:hover .image1 {
   z-index: 6;
   -ms-transform: rotate(-5deg) translate(-20px, -2px);
   -ms-transform-Origin: center bottom;
   -webkit-transform: rotate(-5deg) translate(-20px, 2px);
   -webkit-transform-Origin: center bottom;
   -moz-transform: rotate(-5deg) translate(-20px, -2px);
   -moz-transform-Origin: center bottom;
   -o-transform: rotate(-5deg) translate(-20px, -2px);
   -o-transform-Origin: center bottom;
}

.node-gallery:hover .image2 {
   z-index: 5;
   -ms-transform: rotate(-2deg) translate(0px, 2px);
   -ms-transform-Origin: center bottom;
   -webkit-transform: rotate(-2deg) translate(0px, -2px);
   -webkit-transform-Origin: center bottom;
   -moz-transform: rotate(-2deg) translate(0px, 2px);
   -moz-transform-Origin: center bottom;
   -o-transform: rotate(-2deg) translate(0px, 2px);
   -o-transform-Origin: center bottom;
}

.node-gallery:hover .image3 {
   z-index: 4;
   -ms-transform: rotate(5deg) translate(20px, -2px);
   -ms-transform-Origin: center bottom;
   -webkit-transform: rotate(5deg) translate(20px, 2px);
   -webkit-transform-Origin: center bottom;
   -moz-transform: rotate(5deg) translate(20px, -2px);
   -moz-transform-Origin: center bottom;
   -o-transform: rotate(5deg) translate(20px, -2px);
   -o-transform-Origin: center bottom;
}
htmlcsscss-transformsmicrosoft-edge
9
Gradlon von Kaenel

これには数か月遅れましたが、同じバグに遭遇し、解決策を見つけたと思います。 Microsoft Edge 13では、transform-Originの通常許容される値の解釈に問題があるようです。具体的には、私はright centerの値を無視していましたが、top leftで問題なく機能しているため、center値（サンプルコードに表示されている）が問題である可能性があります。

私の修正はパーセント値を使用することでしたので、transform-Origin: center bottomはtransform-Origin: 50% 100%になります。これがこの問題に遭遇した他の人を助けることを願っています。

上位投票でms-接頭辞を提案しているにもかかわらず、この質問は最近のMS Edgeブラウザに関するものであり、Internet Explorer 9以降、変換プロパティ（- caniuse。 com ）。

10
Jon Uleis

別のユーザーによる編集：この回答は、Microsoft Edgeブラウザには適用されません。

標準のtransitionおよびtransformプロパティを書き込み、次に-ms Microsoft Internet Explorerの接頭辞：

 .selector {
     -webkit-transform: scale(); /* Android, safari, chrome */
     -moz-transform: scale(); /* old firefox */
     -o-transform: scale(); /* old opera */
     -ms-transform: scale(); /* old IE */
     transform: scale(); /*standard */
  }

transitionプロパティでも同じです。あなたの解決策は、標準を書くことです。

3
Marcos Pérez Gude