CSS 在 chrome 和 IE 上转换闪烁

Question

我试图通过 rotate 和 backface-visibility. 强制隐藏它来使 div 出现问题是它在闪烁，然后在一秒钟后消失。这发生在 Chrome。在 IE11 上它根本没有出现...

它在 Firefox 上运行良好。

编辑：我只使用 backface-visibilty 本身，因为当我包含它的变体时，它变得更加不稳定和奇怪的行为。

编辑 2：z-index 似乎也没有帮助。

HTML

<div class="one-third-box" onclick="location.href='#'">
    <div class="overlay"></div>
    <img src="http://www.example.com/image/jpg" />
    <div class="box-description">this is a test description</div>
</div>

CSS

.one-third-box {
    float: left;
    margin-bottom: 2px;
    margin-right: 0.2%;
    width: 33.2%;
    position:relative;
    perspective: 1000;
    cursor:pointer;
}
.one-third-box:hover {
    transform: rotateY(180deg);
    transition: 0.6s;
    transform-style: preserve-3d;
}
.one-third-box:hover img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter:"FlipH";
    position:relative;
    top:-1px;
}
.one-third-box:hover .overlay {
    backface-visibility: hidden;
}
.box-description {
    backface-visibility: hidden;
    background: none repeat scroll 0 0 #2f5d70;
    bottom: 0;
    color: #fff;
    font-size: 18px;
    font-weight: lighter;
    height: 38%;
    padding-left: 10%;
    padding-top: 6%;
    position: absolute;
    transform: rotateY(-180deg);
    width: 100%;
    padding-right: 10%;
}
.overlay {
    position:absolute;
    width:100%;
    height:100%;
    background:url('images/overlay.png');
}
.one-third-box > img {
    width: 100%;
}

Answer 1

我通过稍微更改 CSS 使其工作......好吧，很多。我假设这是由重叠元素 and/or 和 transform-style: preserve-3d; 行之间不一致的硬件加速引起的。无论哪种方式，我都创建了一个似乎对我有用的片段。我还选择使用 CSS 动画而不是过渡，因为在这种情况下它只会使其更具可读性。

* { margin: 0; padding: 0; } /* Simple CSS reset */

.one-third-box {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 33.2%;
}

.one-third-box > img {
  transform-style: flat;
  width: 100%;
  transform: translate3d(0,0,0); /* Fixes blur from scaling */
}

.box-description {
  position: absolute;
  box-sizing: border-box;
  backface-visibility: hidden;
  background: none repeat scroll 0 0 #2f5d70;
  bottom: 0;
  color: #fff;
  font-size: 18px;
  font-weight: lighter;
  height: 38%;
  padding-left: 10%;
  padding-top: 6%;
  width: 100%;
  padding-right: 10%;
  transform: rotateY(-180deg);
}

/* ---------------------- Hover effects ---------------------- */
.one-third-box:hover > img,
.one-third-box:hover > .box-description {
  -webkit-animation: flip 0.6s;
  animation: flip 0.6s;
  transform: rotateY(0deg);
}

/* flip animation */
@-webkit-keyframes flip {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}
@keyframes flip {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}

<div class="one-third-box" onclick="location.href='#'">
  <div class="overlay"></div>
  <img src="http://www.surgemedia.ie/portfolio-images/alci-clear.png" />
  <div class="box-description">this is a test description</div>
</div>

CSS 在 chrome 和 IE 上转换闪烁

CSS Transform flickering on chrome and IE

html

css

google-chrome

internet-explorer-11