Question

我试图弄清楚为什么我的视差效果似乎不能在另一个网站上运行，但它确实在我自己的网站上运行。

它所使用的网站的一般HTML结构：

<html>
  <head>

  </head>
  <body>
    <div class="parallax">
      <header class="parallax__group">
        <div class="parallax__layer parallax__layer--back darken"></div>
        <div class="parallax__layer parallax__layer--base flex alignvcenter">
          <p>Content here</p>
        </div>
      </header>
    </div>
  </body>
</html>

Link to website

这是其他网站的一般HTML结构，除了评论之外不能修改其中的任何内容：

<html>
  <body>
    <div itemscope itemtype="http://schema.org/AutoDealer">
      <div id="main-wrap" class="parallax">
        <div class="row">
          <div class="main twelvecol">

            <!-- Editable -->
            <div>
              <div class="row-block finance parallax__group">
                <div class="parallax__layer--back parallax__layer"></div>
                <div class="wrapper">
                  <div class="container">
                    <div class="parallax__layer--base parallax__layer">
                      <p>This is all of the top level content</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- END Editable -->

          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Link to website

同样，这个问题出现在Firefox上（Edge也可能是同样的问题）。如果您按照链接自己查看并检查代码。

不太确定导致问题的是什么，据我所知，风格是一样的，我曾尝试将工作方式复制到无工作方式，但仍然没有解决问题，也许是一个HTML问题？

CSS样式：

.parallax {
    perspective: 1px;
    height: 100vh !important;
    overflow-x: hidden;
    overflow-y: auto;
    preserve-origin-x: 100%;
    &--ie { display: block; }
    &__group {
      position: relative;
      // transform-style: preserve-3d;
    }
    &__layer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      &--base {
        transform: translateZ(0);
        position: relative;
        float: left;
      }
      &--back {
        transform: translateZ(-1px) scale(2);
        height: 100vh;
      }
      &--middle {
        transform: translateZ(-1.6px) scale(2.6);
        p {
          font-size: 20vw;
          color: rgba(255,255,255,0.3);
        }
      }
    }
  }

CSS Parallax（Firefox）在我的网站上运行，而不是另一个

0 个答案: