面有文字的 3D 立方体在 chrome（17-20 秒）的特定时间后断裂

Question

这个问题似乎只是 chrome 引起的。 3D 立方体的 face/multiple 面变得透明，看起来动画正在中断。有时在中断后添加“backface-visibility”可以解决问题，直到下一次重新加载。确认通过 JS 添加它不能解决问题。关注元素有时也不会让问题发生

重现问题的步骤：

转到 link - https://jsfiddle.net/tk6bd38g/
分别复制HTML和CSS
该问题主要在 17-20 秒内重现，但该问题是间歇性的。有时可能需要多个 refresh/wait 时间，最多 60 秒

Chrome 版本：95.0.4638.69 频道：稳定 OS版本：10.0

适用于以下浏览器 -

Firefox - v94.0.1
Microsoft Edge - 版本 95.0.1020.40
Brave - 版本 1.31.88（Chromium：95.0.4638.69）

PS。考虑到它可能是一个 chrome 错误，我已将问题提交给 chrome 开发人员。寻找workaround/solution到那时

mybot {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  position: sticky;
  z-index: 2147483640;
  cursor: move;
}
mybot * {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

mybot img {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -khtml-user-drag: none;
} 

mybot .row{
  margin-right: 0px;
}

mybot a,
mybot a:hover,
mybot a:focus {
  text-decoration: none;
  outline: none;
} 

@keyframes mybotspincube {
    from,to {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    12% {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }
    30% {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }
    33% {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
        -moz-transform: rotateY(-90deg) rotateZ(90deg);
        -ms-transform: rotateY(-90deg) rotateZ(90deg);
        transform: rotateY(-90deg) rotateZ(90deg);
    }
    47% {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
        -moz-transform: rotateY(-90deg) rotateZ(90deg);
        -ms-transform: rotateY(-90deg) rotateZ(90deg);
        transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
        -webkit-transform: rotateY(-180deg) rotateZ(90deg);
        -moz-transform: rotateY(-180deg) rotateZ(90deg);
        -ms-transform: rotateY(-180deg) rotateZ(90deg);
        transform: rotateY(-180deg) rotateZ(90deg);
    }
    63% {
        -webkit-transform: rotateY(-180deg) rotateZ(90deg);
        -moz-transform: rotateY(-180deg) rotateZ(90deg);
        -ms-transform: rotateY(-180deg) rotateZ(90deg);
        transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
        -webkit-transform: rotateY(90deg) rotateX(90deg);
        -moz-transform: rotateY(90deg) rotateX(90deg);
        -ms-transform: rotateY(90deg) rotateX(90deg);
        transform: rotateY(90deg) rotateX(90deg);
    }
    80% {
        -webkit-transform: rotateY(90deg) rotateX(90deg);
        -moz-transform: rotateY(90deg) rotateX(90deg);
        -ms-transform: rotateY(90deg) rotateX(90deg);
        transform: rotateY(90deg) rotateX(90deg);
    }
    83% {
        -webkit-transform: rotateX(90deg);
        -moz-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }
    97%  { 
        -webkit-transform: rotateX(90deg);
        -moz-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg); }
}

mybot .mybotcubespinner {
    -webkit-animation-name: mybotspincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;

    animation-name: mybotspincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: 50px 50px 0;
    -moz-transform-origin: 50px 50px 0;
    -ms-transform-origin: 50px 50px 0;
    transform-origin: 50px 50px 0;
}
mybot .mybotcubespinner .mybotface{
    position: absolute;
    /* backface-visibility: visible; */
    width: 100px;
    height: 100px;
    border: .9px solid #ccc;
    background: red;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    text-align: center;
    border-radius: 5px;
}

mybot .mybotcubespinner .mybotface1 {
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
    -ms-transform: translateZ(50px);
    transform: translateZ(50px);
    background: #360033;
    background: -webkit-linear-gradient(to top, #0b8793, #360033);
    background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotcubespinner .mybotface2 {
    -webkit-transform: rotateY(90deg) translateZ(50px);
    -moz-transform: rotateY(90deg) translateZ(50px);
    -ms-transform: rotateY(90deg) translateZ(50px);
    transform: rotateY(90deg) translateZ(50px);
   background: url('https://i.pinimg.com/474x/ce/60/cf/ce60cf6c3f5d3ab57136565b104f163b.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
 mybot .mybotcubespinner .mybotface3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
    transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
    background: #360033;
    background: -webkit-linear-gradient(to top, #0b8793, #360033);
    background: linear-gradient(to top, #0b8793, #360033);
}
mybot  .mybotcubespinner .mybotface4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
    transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
    background: #360033;
    background: -webkit-linear-gradient(to top, #0b8793, #360033);
    background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotcubespinner .mybotface5 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
    background: #360033;
    background: -webkit-linear-gradient(to top, #0b8793, #360033);
    background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotcubespinner .mybotface6 {
    -webkit-transform: rotateX(-90deg) translateZ(50px);
    -moz-transform: rotateX(-90deg) translateZ(50px);
    -ms-transform: rotateX(-90deg) translateZ(50px);
    transform: rotateX(-90deg) translateZ(50px);
    background: #360033;
    background: -webkit-linear-gradient(to top, #0b8793, #360033);
    background: linear-gradient(to top, #0b8793, #360033);
}

 mybot .mybotstagecrn{
  width: 100px;
  height: 100px;
  bottom: 60px;
  position: absolute;
  right: 25px;
  font-size: 15px;
  pointer-events: all;
}

mybot .mybotstagecrn-left{
  left: 25px;
  width: 100px;
  height: 100px;
  bottom: 60px;
  position: absolute;
  font-size: 15px;
  pointer-events: all;
}

mybot .mybotTopBar{
  background: red;
  width: 100px;
  height: 15px;
  border-bottom: .9px solid white;
  color: white;
  text-align: center;
  margin: auto;
  line-height: 15px;
}
mybot .mybotPoweredBy{
  font-size: 9px;
  font-weight: 600;
}
mybot .mybotPoweredByBrand{
  font-size: 12px;
  font-weight: 600;
}
mybot .mybotBottomBar{
  background: red;
  width: 100px;
  height:15px;
  color: white;
  margin: auto;
  line-height: 15px;
  text-align: center;
  bottom: 0px;
  position: absolute;
  font-size: 12px;
}

mybot .mybotSummary{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-family: "Lato", sans-serif !important;
  font-weight: 600;
   color: white;
}

  <mybot>
        <div class="mybotcubespinner">
          <div class="mybotface1 mybotface">
            <div class="mybotTopBar">
              <span class="mybotPoweredBy">
                Powered By
              </span>
              <span class="mybotPoweredByBrand">
                Sample
              </span>
            </div>
            <div class="mybotContent">
              <div class="mybotSummary">
                <span class="mybotLocation" id="mybotWorldCases">
                  World Cases
                </span>
                <div class="mybotCount" id="mybotWorldCount">
45461845412
                </div>
              </div>
            </div>
            <div class="mybotBottomBar mybotBottomBarLive">
              <span class="">COVID-19 Cases</span>
            </div>
          </div>
          <div class="mybotface2 mybotface"></div>
          <div class="mybotface3 mybotface">
            <div class="mybotTopBar">
              <span class="mybotPoweredBy">
                Powered By
              </span>
              <span class="mybotPoweredByBrand">
                Sample
              </span>
            </div>
            <div class="mybotContent">
              <div class="mybotSummary">
                <span class="mybotLocation" id="mybotWorldDeathsCases">
                  World Deaths
                </span>
                <div class="mybotCount" id="mybotWorldDeaths">
         4555225
                </div>
              </div>
            </div>
            <div class="mybotBottomBar mybotBottomBarLive">
              <span class="">COVID-19 Cases</span>
            </div>
          </div>
          <div class="mybotface4 mybotface">
            <div class="mybotTopBar">
              <span class="mybotPoweredBy">
                Powered By
              </span>
              <span class="mybotPoweredByBrand">
                Sample
              </span>
            </div>
            <div class="mybotContent">
              <div class="mybotSummary">
                <span class="mybotLocation" id="mybotCountryName">
                  India Cases
                </span>
                <div class="mybotCount" id="mybotCountryCount">
5454254
                </div>
              </div>
            </div>
            <div class="mybotBottomBar mybotBottomBarLive">
              <span class="">COVID-19 Cases</span>
            </div>
          </div>
          <div class="mybotface5 mybotface">
            <div class="mybotTopBar">
              <span class="mybotPoweredBy">
                Powered By
              </span>
              <span class="mybotPoweredByBrand">
                Sample
              </span>
            </div>
            <div class="mybotContent">
              <div class="mybotSummary">
                <span class="mybotLocation" id="mybotCountryName2">
                  India Deaths
                </span>
                <div class="mybotCount" id="mybotCountryDeaths">
24552
                </div>
              </div>
            </div>
            <div class="mybotBottomBar mybotBottomBarLive">
              <span class="">COVID-19 Cases</span>
            </div>
          </div>
          <div class="mybotface6 mybotface">
            <div class="mybotTopBar">
              <span class="mybotPoweredBy">
                Powered By
              </span>
              <span class="mybotPoweredByBrand">
                Sample
              </span>
            </div>
            <div class="mybotContent">
              <span class="mybotScoreLiveDot"></span>
              <div class="mybotSummary">
                <span class="mybotLocation" id="mybotPrecautionText">
                  Stay Safe!
                </span>
                <!--<div class="mybotCount mybotUpdate">
                  Click for live updates
                </div> -->
              </div>
            </div>
            <div class="mybotBottomBar mybotBottomBarLive">
              <span class="">COVID-19 Cases</span>
            </div>
          </div>
        </div>
</mybot>

Answer 1

我不确定为什么它在 Chrome 上不起作用，但它在其他浏览器上起作用，但我注意到您在 CSS[=11] 中缺少 perspective 属性=]

试试这个：

mybot .mybotcubespinner {
  -webkit-animation-name: mybotspincube;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;

  animation-name: mybotspincube;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 30000 ;

  -webkit-transform-origin: 50px 50px 0;
  -moz-transform-origin: 50px 50px 0;
  -ms-transform-origin: 50px 50px 0;
  transform-origin: 50px 50px 0px;
}

注意 -webkit-perspective 属性.

我的理论是元素之间存在一些 z 冲突，并且由于它们没有 space，它们被限制在同一个 space 中，导致了这个问题。这在计算机图形学中很常见。

不确定每个浏览器是否以不同的方式处理此问题，但通过此更改它应该适用于 Chrome。

面有文字的 3D 立方体在 chrome（17-20 秒）的特定时间后断裂

3D cube with text on faces breaks after certain time in chrome (17-20seconds)

html

css

google-chrome