CODEWITHSUNDEEP
htmlcsschromiumcss-transformsperspective
TriVoxel
TriVoxel

Reputation: 131

Using 3D CSS transforms on large background elements breaks scrolling overflow in Chromium browsers

I'm designing a website that takes advantage of the CSS transform3D feature which allows me to position divs in 3D space with hardware-accelerated 3D transformation such as perspective and scaling. I followed Keith Clark's "Pure CSS Parallax Websites" guide as a starting point, as well as a Medium article from "Daily Fire". I modified the technique to allow me to place multiple layers of fullscreen background images on my website, which makes for a very cool effect. You can see it live, in action on my personal website.

My problem is that despite my best efforts, these very large background elements cause the page to scroll past the bounds of my main content in Chrome. Firefox and Safari have no trouble rendering this page correctly. Chrome allows the user to scroll waaaaaaaaaay past the bottom of my webpage instead of respecting my overflow settings.

Screenshot from Chrome: Screenshot from Chrome

Screenshot from Safari: Screenshot from Safari

Here's some pseudo-code:

<body>
  <div class="bgcontainer">
    <!--try to delete the bgcontainer-->
    <div class="bglayer bg1"></div>
    <div class="bglayer bg2"></div>
    <div class="bglayer bg3"></div>
  </div>
  <div class="content"></div>
</body>

/* Formatting and parallax stuff */
html, body {
  background: #000;
  height: 100vh;
  margin: 0;
  overflow: hidden scroll; /* (x y) */
  padding: 0;
  perspective: 1px; /* Desines "strength" of 3D effect */
  transform-style: preserve-3d; /* Tells browser to render page as 3D */
  width: 100vw;
}
.content {
  /* uncomment following line if you want to work around deleting bgcontainer div */
  /*margin-top: 80vh;*/
  background: #111C;
  border: yellow 2px solid;
  height: 1600px;
  transform: translateZ(0px);
  width: 100%;
}

/* Background elements */
.bgcontainer {
  /* if we contain the parallax elements in a parent div, */
  /* chrome just renders the page weird. This is where the bug is. */
  height: 80vh;
  transform-style: preserve-3d;
  width: 100vw;
}
.bglayer {
  bottom: 0px;
  display: block;
  left: 0px;
  position: fixed; /* if set to absolute, breaks WebKit */
  right: 0px;
  top: 0px;
}
.bg1 {
  background-color: red;
  width: 95%;
  height: 95%;
  transform: scale(21) translateZ(-20px);
  /* translateZ & translate3D can define a layer's depth */
  /* we need to scale it to compensate for perspective */
}
.bg2 {
  background-color: blue;
  width: 75%;
  height: 75%;
  transform: scale(11) translateZ(-10px);
}
.bg3 {
  background-color: green;
  width: 65%;
  height: 65%;
  transform: scale(6) translateZ(-5px);
}

Here is a CodePen demo I made which shows a simplified version of what I'm trying to do. As you can see, there is a scrollable document, with the background container (plxBgContain) containing 3 layers of block divs in different colors, all offset at different z-values to give the illusion of 3D depth. This effect is critical to my design goals.

I was hoping someone skilled could help me understand why this issue is happening and how to fix it.

Upvotes: 1

Views: 70

Answers (0)

Related Questions