纯 CSS 视差背景停止在所有设备/浏览器上工作

Question

I noticed this happening a couple of weeks ago on a website that I built and have worked on since 2017. On the landing page of this site , there's two sections that are supposed to have a sort of slow parallax scrolling effect that I implemented with straight CSS (no JavaScript.) For some reason, the parallax effect no longer works on any device that I've tried, with several browsers across multiple devices. The CSS hasn't been updated since probably 2019. It seemed to be working a few weeks ago when I had last checked to update the site.

here's the relevant CSS if you don't want to open dev tools. I realize some of this is really shoddy, I've done better as a dev since:

html{
  height: 100%;
  overflow: hidden;
}

body{
    background-color: #322e32;
    /*margin: 15px 0 15px 0;*/
    padding-top: 65px;
    min-height: 100%;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    -webkit-perspective: 1px;
            perspective: 1px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}

main{
  min-height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  padding-bottom: 30px; /* footer height */
  perspective: 2px;
}

.no-para {
  z-index: 2;
  background: #322e32;
}

.index-tour{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.5vw 48vw 1vw 48vw 1.5vw;
  grid-template-columns: 1.5vw 48vw 1vw 48vw 1.5vw;;
  -ms-grid-rows: 100px 100vh 100px 100vh 75px 100vh 45vh;;
  grid-template-rows: 100px 100vh 100px 100vh 75px 100vh 45vh;
}

#tour-header{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 1;
      grid-row-start: 1;
  -ms-grid-row-span: 1;
  grid-row-end: 2;
  z-index: 2;
  background: #322e32;
  text-align: center;
}

#tour-gallery{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 2;
      grid-row-start: 2;
  -ms-grid-row-span: 1;
  grid-row-end: 3;
}

#tour-gallery:before{
  background: url('indexTour1.png');
  -webkit-transform: translateZ(-1px) scale(2);
          transform: translateZ(-1px) scale(2);
}

#tour-gallery-text{
  position: absolute;
  left: 50%;
  margin-right: -25%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 37%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 5em;
  font-size: 1.3em;
  background: #00000061;
  border-radius: 80px;
}

#tour-portraits{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 3;
      grid-row-start: 3;
  -ms-grid-row-span: 1;
  grid-row-end: 4;
  /*height: 100px;
  width: 100%;*/
  background: #322e32;
  z-index: 2;
}

#tour-portraits p {
  text-align: center;
}

#tour-pet-portraits{
  -ms-grid-column: 2;
      grid-column-start: 2;
  -ms-grid-column-span: 1;
  grid-column-end: 3;
  -ms-grid-row: 4;
      grid-row-start: 4;
  -ms-grid-row-span: 1;
  grid-row-end: 5;
  background: url('../gallery/01032019A.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}

#tour-human-portraits{
  -ms-grid-column: 4;
      grid-column-start: 4;
  -ms-grid-column-span: 1;
  grid-column-end: 5;
  -ms-grid-row: 4;
      grid-row-start: 4;
  -ms-grid-row-span: 1;
  grid-row-end: 5;
  background: url('../gallery/79183.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}

#tour-portraits-text{
  position: absolute;
  /* margin: 54vh 4vw;
  padding-right: 7px;
  padding-left: 7px;
  font-size: 1.3em; */
  background: #0000007d;
  border-radius: 42px;
  text-align: center;
}

#tour-special{
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 5;
  grid-column-end: 6;
  -ms-grid-row: 6;
      grid-row-start: 6;
  -ms-grid-row-span: 1;
  grid-row-end: 7;
}

#tour-special:before{
  background: url('indexTour2.png');
  -webkit-transform: translateZ(-1px) scale(2);
          transform: translateZ(-1px) scale(2);
}

And the relevant HTML (via PHP, but I doubt that matters):

  <div id='tour-header'>
    <h1>A Tour Of The Studio...</h1>
  </div>
  <div id='tour-gallery' class="parallax-back">
    <div id='tour-gallery-text'>
      <h2><b>Main Gallery</b></h2>
      <p>The Main Gallery includes original works of art by Anni that are available for purchase at reasonable prices.
        We normally ship pieces via USPS, but if you're local to the Greater Atlanta Area, we can arrange for pick up.
        <b>Please note that we are unable to ship outside of the United States at this time!</b></p><br />
      <p style='text-align: center;'><a href='gallery.php' class="purchaseButton" role="button">Visit Main Gallery →</a></p>
    </div>
  </div>
  <div id='tour-portraits'>
    <h2><b>Custom Portraits</b></h2>
    <p>Commissions For Portraits Are <span style="color: #9bffb5;"><b>Currently Open!</b></span></p>
  </div>
  <div id='portraits-gap2' class='no-para'></div>
  <div id='tour-pet-portraits'>
    <div id='tour-portraits-text' class='tour-portraits-text-margins1'>
      <h3><b>Pet Portraits</b></h3>
      <p>Commission Anni to perfectly capture your furbaby (or fur children) on canvas!</p><br />
      <p style='text-align: center;'><a href='petportrait.php' class="purchaseButton" role="button">Learn More →</a></p>
    </div>
  </div>
  <div id='portraits-gap1' class='no-para'></div>
  <div id='tour-human-portraits' class='no-para'>
    <div id='tour-portraits-text' class='tour-portraits-text-margins2'>
      <h3><b>People Portraits</b></h3>
      <p>Want to see yourself or a loved one painted? Let Anni do it in immaculate detail!</p><br />
      <p style='text-align: center;'><a href='portraits.php' class="purchaseButton" role="button">Learn More →</a></p>
    </div>
  </div>
  <div id='portraits-gap3' class='no-para'></div>
  <div id='portraits-bottom' class='no-para'></div>
  <div id='tour-special' class='parallax-back'>
    <div id='tour-gallery-text'>
      <h2><b>Special Gallery</b></h2>
      <p>Here you can take a look at some of Anni's past commissions, sold/donated original pieces, and select works that are permanently kept in the studio.</p><br />
      <p style='text-align: center;'><a href='special.php' class="purchaseButton" role="button">Visit Special Gallery →</a></p>
    </div>
  </div>

Thing is, when I look up other methods of implementing parallax with just CSS, a lot of those CodePens and demos, some as recent as this year, don't work as intended either. Did something happen with the rules of CSS or something? Because this used to work, I swear! Any help is appreciated!

Answer 1

Mine broke too, I am not sure what changed, but if you add

transform-style: preserve-3d;

to your paralax container it should fix it.