html - 我的 css 中的哪个属性导致预期效果在 Safari 中起作用，但在 Chrome 中不起作用？

问题描述

我一直在开发个人网站，并试图获得特定的滚动效果，其中页面被分成几个部分，每个部分与下一个部分重叠。同时，每个部分的内容保持固定，因此每个部分的内容永远不会移动，而是通过每个部分滚动到位来显示。

我的问题是，使用我现在的代码，我在 Safari 中实现了这个效果，但是当我在 Chrome 中打开同一个文件时，它根本不起作用。我在以下代码中隔离了我想要的特定效果：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.section {
  height: 100vh;
  overflow: hidden;
  position: -webkit-sticky;
  /*    position: -moz-sticky;*/
  /*    position: -ms-sticky;*/
  /*    position: -o-sticky;*/
  top: 0;
}

.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
}

#first {
  background-color: lightgrey;
  z-index: 1;
}

#second {
  background-color: lightblue;
  z-index: 2;
}

#third {
  background-color: black;
  color: white;
  z-index: 3;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="Vishal Cherian" description="Vishal's personal and professional website">
  <title>Vishal | Welcome</title>
</head>

<body>
  <div class="section" id="first">
    <div class="fixed">
      <h1>Hello</h1>
    </div>
  </div>
  <div class="section" id="second">
    <div class="fixed">
      <h1>Goodbye</h1>
    </div>
  </div>

  <div class="section" id="third">
    <div class="fixed">
      <h1>Hello Again</h1>
    </div>
  </div>
</body>

</html>

如果你在Safari中打开这段代码，你会看到效果，但如果你在Chrome中打开，就完全不同了。

我假设问题出在我的 CSS 文件中，但从我所做的研究来看，与 Safari 处理它们的方式相比，Chrome 处理我使用的任何单个 CSS 属性的方式都找不到任何差异。有什么我想念的吗？

标签： htmlcss

html - 我的 css 中的哪个属性导致预期效果在 Safari 中起作用，但在 Chrome 中不起作用？

问题描述

解决方案

推荐阅读