4

Let's start with the fiddle: http://jsfiddle.net/r1kw37g5/

.grid-item .diamond .inner-diamond{
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 394px;
  height: 394px;
  position: relative;
  top: -23%;
  left: -23%;
}

The situation is I created a diamond shaped grid. This grid has elements in it that are rotated -45 deg and a container inside that is rotated 45 deg to get the content straight again. (the content appears on hover)

Inside that container is a button with a simple animation, and here is where the problem starts. When you hover over the button the other content becomes blurry for a while until the animation ends and also makes a 1px jump to the right.

I tried: putting a translateZ(0) on the container to stop it from making a jump. That works but makes the content blurry constantly. I have tried to combat the blurry content with zoom and scale combination preserve3d and font-smoothing but so far no luck.

The question is does anybody know a way in which I can animate the button without it making a jump and without the other content becoming blurry?

ghost_dad
  • 1,308
  • 2
  • 12
  • 21
Pascal Wientjes
  • 163
  • 11
  • Have you checked if the opacity / color of the text changes during the animation with devtools? Because it looks like default color of the text is not the same as it is during the animation. – matmik Jun 01 '16 at 15:50

1 Answers1

2

Seems there are some problem in the animation (CSS transition effect makes image blurry / moves image 1px, in Chrome?)

I'll let the text outside the transform's element.

  1. put your .button inside .diamond
  2. move .inner-diamond to be a sibling of the .diamond, give it a opacity: 0(remove .diamond-content's opacity:0)
  3. set pointer-events:none to the .inner-diamond

use sibling method to fulfill it

.diamond:hover + .inner-diamond {
  opacity: 1
}

a quick demo(layout not pretty): http://jsfiddle.net/r1kw37g5/6/

Community
  • 1
  • 1
twxia
  • 1,813
  • 1
  • 15
  • 25
  • This work around does cause new problems for my specific build, but the answer does explain the problem quite nicely and offers a practical work around so kudo's on that – Pascal Wientjes Jun 02 '16 at 09:37