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

Time：11-12

The issue seems only to be chrome based. The 3D cube's face/multiple faces become transparent that makes it look like the animation is breaking. Sometime adding "backface-visibility" after the break can fix the issue until next reload. Confirmed adding this via JS does not fix the issue. Focusing on the element also sometime does not let the issue happen

Steps to reproduce the problem:

  1. Go to the link - https://jsfiddle.net/tk6bd38g/
  2. Copy the respective HTML and CSS
  3. The issue is reproduced mostly in 17-20 seconds, however the issue is intermittent. Sometimes can take multiple refresh/wait time upto 60 seconds

Chrome version: 95.0.4638.69 Channel: stable OS Version: 10.0

Works on the following browsers -

  • Firefox - v94.0.1
  • Microsoft Edge - Version 95.0.1020.40
  • Brave - Version 1.31.88 (Chromium: 95.0.4638.69)

PS. Considering it might be a chrome bug, I have submitted the issue to chrome dev. Looking for a workaround/solution till then

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 >
                  Click for live updates
                </div> -->
              </div>
            </div>
            <div class="mybotBottomBar mybotBottomBarLive">
              <span class="">COVID-19 Cases</span>
            </div>
          </div>
        </div>
</mybot>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I'm not sure why it's not working on Chrome but it does in other browsers, but what I notice is that you're missing the perspective attribute in the CSS

Try this out:

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

Notice the -webkit-perspective property.

My theory is that there's some z-fighting between the elements, and since there no space for them, they are clamped into the same space, causing this issue. This is common in computer graphics.

Not sure if each browser handles this in a different way, but with this change it should work on Chrome.

Page link：https//www.codepudding.com/net/188884.html

Prev:JavaScript React hiding source files in sources tab
Next:405 - Uncaught (in promise) Error: Request failed with status code 405
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding