Issue with CSS perspective / translateZ in Safari

Question

Working with perspective and translateZ for the first time, and i'm running into a bit of an issue with Safari.

I'm using the code to create a simple parallax effect for a site i'm building, which is working correctly in firefox and chrome, but not in safari. Safari seems to be adding padding to the bottom of the container on which the perspective attribute is applied, which doest occur on the other mentioned browsers.

I've had a look in safari's debug tools to see if any padding or margins are being added anywhere that they shouldn't be, but that doesn't seem to be the case. I will attach my code below to demonstrate, as well as some images of both the desired, and undesired behaviour.

Cheers in advance.

Desired Behaviour:

Undesired Behaviour:

@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Staatliches', cursive;
  -webkit-margin-end: none;
  -webkit-padding-end: none;
}

.parallax {
  position: fixed !important;
  perspective: 1px !important;
  width: 100%;
  top: 0;
  bottom: 0;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

.object-wrapper {
  display: block !important;
  height: 100vh !important;
  width: 100vw !important;
  background: none !important;
}

.mix-blend {
  // mix-blend-mode:screen;
}

.speed-1 {
  -webkit-backface-visibility: hidden;
  transform: translateZ(-1px) scale(2);
}

.speed-2 {
  -webkit-backface-visibility: hidden;
  transform: translateZ(-2px) scale(3);
}

.speed-3 {
  -webkit-backface-visibility: hidden;
  transform: translateZ(-3px) scale(4);
}

.speed-4 {
  -webkit-backface-visibility: hidden;
  transform: translateZ(-4px) scale(5);
}

.speed-5 {
  -webkit-backface-visibility: hidden;
  transform: translateZ(-5px) scale(6);
}

.speed-6 {
  -webkit-backface-visibility: hidden;
  transform: translateZ(-6px) scale(7);
}

.object {
  line-height: 100vh;
  font-size: 33.33vw;
  text-align: center;
  color: black;
}

.object-1 {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: white;
}

.object-2 {
  position: relative;
  top: 0vh;
  left: 0;
  height: 200vh;
  width: 33.33vw;
  background: white;
}

.object-3 {
  position: relative;
  top: -24vh;
  left: 33.33vw;
  height: 101vh;
  width: 33.33vw;
  background: white;
}

.object-4 {
  position: relative;
  top: -66.66vh;
  left: 66.66vw;
  height: 133.33vh;
  width: 33.33vw;
  background: white;
}

.object-5 {
  position: relative;
  top: 0vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: red;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

<div class="parallax">
  <div class="object-wrapper mix-blend speed-1">
    <div class="object object-2">
      <div class="hero-text">W</div>
    </div>
  </div>
  <div class="object-wrapper mix-blend speed-3">
    <div class="object object-3">
      <div class="hero-text">C</div>
    </div>

  </div>
  <div class="object-wrapper mix-blend speed-2">
    <div class="object object-4">
      <div class="hero-text">M</div>
    </div>
  </div>
  <div class="object-wrapper speed-1">
    <div class="object object-5">
      <div class="hero-text">M</div>
    </div>
  </div>
</div>

Answer 1

After much pulling my own hair out I have solved the problem, I just had to set the transform and perspective origin to bottom right!

This guide from Google's Paul Lewis was massively helpful!

https://developers.google.com/web/updates/2016/12/performant-parallaxing

Answer 2

I had a similar problem with https://materializecss.com/carousel.html and Safari. Finally the solution was to put "transform-origin: center;" to the carousel element itself (the container div with the class .carousel)