Safari Rendering Issues on Rotated Elements

问题

world {
  width: 100%;
  height: 100%;
  position: absolute;
  perspective:800px;
}
bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z:1;
  transform:rotateX(20deg) rotateY(10deg);
  background: url(https://images.pexels.com/photos/1154498/pexels-photo-1154498.jpeg?auto=compress&cs=tinysrgb&h=1250);
}
layer_wrap {
  width: 350px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  mix-blend-mode: overlay;
  z:100;
  perspective:500px;
  transform-style:flat;
  backface-visibility:hidden;
}

layer {
 position:relative;
  background: rgba(0, 122, 255,0.8);
  padding: 20px;
  color: #fff;
  text-transform: uppercase;
  font-family: "Arial";
  font-size: 30px;
  text-align: center;
  transformOrigin:50% 50% 50%;
  transform:translateX(-50%) translateY(-50%) rotateX(30deg) rotateY(5deg) translateZ(0.001px);
}

<world>
  <bg></bg>
  <layer_wrap>
    <layer>THIS IS A LAYER</layer>
  </layer_wrap>
</world>

In the example the bg container and the layer_wrap container must be on the same level to be able to use mix-blend-mode and for other requirements of the Project.

The Results how it is rendered in Safari and Chrome are different. Safari cuts the half of the Layer rendering the whole world in one container. transformStyle preserve-3d or other Tricks were not helpful.

Also a transformZ is not the solution since it would change the size and distance to viewer.

Hope one of you guys have a good solution for this. Cheers !

来源：https://stackoverflow.com/questions/50830605/safari-rendering-issues-on-rotated-elements

标签

css

safari

rendering

transform