CODEWITHSUNDEEP
htmlcssgoogle-chromeanimationopera
Red
Red

Reputation: 7324

CSS3 Perspective() animation acting weird on fast mouse move

Perspective animation
I was playing around with the css perspective() animation. However, when testing it in Chrome and Opera, I came across some weird behavior.

Chrome and Opera are acting very weird when repeatedly hovering fast over the animation. The animation gets triggered on :hover. Perhaps this is causing the behavior? How can i stop Chrome and Opera having this behavior.

Fiddle
I reproduced the problem within a fiddle. Just do like the red dot is showing.

body {
  text-align: center;
}

.container {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
  border: 2px solid red;
}

.perspective {
  background: blue;
  height: 200px;
  width: 200px;
  transition: transform .33s;
}

.perspective:hover {
  transform: perspective( 800px ) rotateY(15deg);
}

.perspective p {
  margin: 0;
  color: #fff;
  text-align: center;
  line-height: 200px;
}

.mouse-helper {
  position: absolute;
  height: 90px;
  width: 15px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
}

.mouse-helper .animated {
  background: red;
  position: absolute;
  bottom: 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  
  animation: up-down .29s infinite;
}

@keyframes up-down {
  0% {bottom: 0;top: calc(100% - 15px);}
  50% {top: 0;bottom: calc(100% - 15px);}
  100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
  <div style="overflow: hidden;">
    <div class="perspective">
      <p>TEXT</p>
    </div>
  </div>
  <div class="mouse-helper">
    <div class="animated"></div>
  </div>
</div>

Upvotes: 4

Views: 774

Answers (1)

ij6
ij6

Reputation: 466

My guess, but it's only a guess, is that this is related to the response in this issue thread, where some transforms are hardware accelerated and some are not, and that can cause things to get out of sync briefly.

If you explicitly add transform: perspective(0px) rotateY(0deg); to your (non-hovered) .perspective, it doesn't happen:

body {
  text-align: center;
}

.container {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
  border: 2px solid red;
}

.perspective {
  background: blue;
  height: 200px;
  width: 200px;
  transition: transform .33s;
  transform: perspective(0px) rotateY(0deg);
}

.perspective:hover {
  transform: perspective( 800px ) rotateY(15deg);
}

.perspective p {
  margin: 0;
  color: #fff;
  text-align: center;
  line-height: 200px;
}

.mouse-helper {
  position: absolute;
  height: 90px;
  width: 15px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
}

.mouse-helper .animated {
  background: red;
  position: absolute;
  bottom: 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  
  animation: up-down .29s infinite;
}

@keyframes up-down {
  0% {bottom: 0;top: calc(100% - 15px);}
  50% {top: 0;bottom: calc(100% - 15px);}
  100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
  <div style="overflow: hidden;">
    <div class="perspective">
      <p>TEXT</p>
    </div>
  </div>
  <div class="mouse-helper">
    <div class="animated"></div>
  </div>
</div>

So there's your fix; as to the "why?", once again a guess: The Chromium issue linked above has this from a Chromium dev:

Alternatively we may be able to pull transform animations back to the main thread in this case.

We already do this (at least in M33) for animations where keyframes reference both accelerated and non-accelerated properties:

Maybe the same is now true for transitions (the issue is from 2014), but because the non-hover state does not have any transforms, this logic won't be triggered in your case.

Upvotes: 5

Related Questions