CODEWITHSUNDEEP
htmlcss
Ilja
Ilja

Reputation: 46537

css3 transforms appear differently on safari and chrome

I am messing around with css transforms making a company branded ping pong bat, was working in safari and it all looks perfectly fine so far: http://codepen.io/IljaDaderko/pen/dpyZoL however in chrome, there seems to be an issue with one side of the bat handle and I am not sure to what it causing it.

HTML:

<div class='wrapper'>
  <div class='bat'>
    <div class='pad'>
      <div class='front'></div>
      <div class='back'></div>
    </div>
    <div class='handle'>
      <div class='front'></div>
      <div class='left'></div>
      <div class='back'></div>
      <div class='right'></div>
      <div class='bottom'></div>
    </div>
  </div>
</div>

CSS

.wrapper {
  text-align: center;
  padding: 20px 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.bat {
  display: inline-block;
  -webkit-animation: rotate 7s infinite;
          animation: rotate 7s infinite;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.pad {
  width: 200px;
  height: 220px;
}
.pad .front {
  width: 100%;
  height: 100%;
  background-color: #CC0000;
  border-radius: 60% 60% 45% 45%;
}
.pad .back {
  width: 100%;
  height: 100%;
  background: #66C6CC;
  -webkit-transform: translateY(-100%) translateZ(10px);
          transform: translateY(-100%) translateZ(10px);
  border-radius: 60% 60% 45% 45%;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://loot.io/assets/e76ce259fa1ceffeb4edf110b55ea931.svg");
}

.handle {
  position: absolute;
  top: 220px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 120px;
}
.handle .front {
  height: 100%;
  width: 100%;
  background-size: auto 100%;
  background-image: url("http://www.texturezine.com/wp-content/uploads/2009/12/5wood.jpg");
}
.handle .back {
  height: 100%;
  width: 100%;
  background-size: auto 100%;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  background-image: url("http://www.texturezine.com/wp-content/uploads/2009/12/5wood.jpg");
  -webkit-transform: translateY(-200%) translateZ(10px);
          transform: translateY(-200%) translateZ(10px);
}
.handle .left {
  width: 10px;
  height: 100%;
  background-size: auto 100%;
  background-image: url("https://fdrfreebies.s3-us-west-1.amazonaws.com/wp-content/uploads/2016/04/wood-free-txtr-4.jpg");
  -webkit-transform: rotateY(90deg) translateX(-5px) translateY(-100%) translateZ(-5px);
          transform: rotateY(90deg) translateX(-5px) translateY(-100%) translateZ(-5px);
}
.handle .right {
  width: 10px;
  height: 100%;
  lootbackground-size: auto 100%;
  background-image: url("https://fdrfreebies.s3-us-west-1.amazonaws.com/wp-content/uploads/2016/04/wood-free-txtr-4.jpg");
  -webkit-transform: rotateY(90deg) translateX(-5px) translateY(-300%) translateZ(45px);
          transform: rotateY(90deg) translateX(-5px) translateY(-300%) translateZ(45px);
}
.handle .bottom {
  background-size: auto 100%;
  background-image: url("http://de.academic.ru/pictures/dewiki/82/Rio-Palisander,_dunkel_Holz.JPG");
  width: 10px;
  height: 50px;
  -webkit-transform: translateY(-385px) translateX(20px) translateZ(5px) rotateY(90deg) rotateX(90deg);
          transform: translateY(-385px) translateX(20px) translateZ(5px) rotateY(90deg) rotateX(90deg);
}

@-webkit-keyframes rotate {
  50% {
    -webkit-transform: rotateY(360deg) rotateX(40deg);
            transform: rotateY(360deg) rotateX(40deg);
  }
}

@keyframes rotate {
  50% {
    -webkit-transform: rotateY(360deg) rotateX(40deg);
            transform: rotateY(360deg) rotateX(40deg);
  }
}

EDIT: As a bonus I would really appreciate suggestions for bat head sides (they need to be arched)

Upvotes: 0

Views: 775

Answers (1)

p1n5u
p1n5u

Reputation: 57

Just had a look at your code and i saw that you did not re-set the transform-style on your .handle element which is positioned absolutely.

To fix your .handle element just add transform-style: preserve-3d; to the .handle class which will look like this afterwards:

 .handle {
   position: absolute;

   transform-style: preserve-3d;  

   top: 220px;
   left: 50%;
   margin-left: -25px;
   width: 50px;
   height: 120px;
 }

EDIT:

Here a is Pen with the handle working. I changed the background image with a color to have a better visualisation of the problem.

Upvotes: 1

Related Questions