视网膜屏幕上的 Chrome 中的 CSS 多背景问题

Question

我要做的是在内容滚动时向父容器添加顶部和底部阴影。除了视网膜屏幕上的 Chrome 之外，它在任何地方都能很好地工作。它的行为很奇怪。当内容滚动时，背景会卡在顶部、底部或两者兼而有之。

.container {
  width: 300px;
  height: 150px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #eee;
  overflow: auto;
  background: 
    linear-gradient(white 30%,rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0),white 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 20px,100% 20px,100% 10px,100% 10px;
  background-attachment: local,local,scroll,scroll;
}

.content {
  padding: 15px 10px;
  color: #555;
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iure repellendus tenetur totam possimus reiciendis error beatae nisi eligendi eveniet sit ullam, delectus dolorem voluptatum qui esse quod maxime praesentium cum perspiciatis dignissimos quam vero illum eius quisquam. Fugit ducimus repudiandae nisi corporis illo quo atque, aliquid. Perferendis labore vero quae officia eaque deserunt delectus, ipsa reiciendis vel eveniet, adipisci magni, possimus eum ipsum non laborum. Aspernatur iste, ratione eaque necessitatibus iure ipsum velit nobis quisquam explicabo quis voluptas inventore sapiente veniam, exercitationem assumenda natus eligendi! Soluta omnis blanditiis non dolor voluptates quo, est provident beatae enim id, numquam molestias placeat quibusdam. Facere expedita aliquam natus id nobis dolorem laboriosam omnis saepe, itaque adipisci, deleniti praesentium quidem maiores vitae, enim neque aperiam dolore impedit non illo accusamus ab consequatur quia vel. Fugit fugiat, quis iste sit recusandae maxime earum officiis. Temporibus doloremque quasi odit, voluptate, at, voluptates labore neque nesciunt tenetur voluptatum debitis aliquid delectus? Error architecto porro illo velit autem in voluptates cum accusantium aut maiores quam maxime consequuntur possimus labore commodi odit vero ipsam libero, aliquid iure quod temporibus, molestias delectus. Consectetur obcaecati, rem laborum tempore! Dolorem explicabo nisi accusamus qui soluta amet mollitia laboriosam illum molestias et.
  </div>
</div>

我推测 background-attachment 属性会以某种方式导致它。

视频：https://monosnap.com/file/uIWzofapTsteYNuv3tkdO9kWM1PjCv

Answer 1

通过向 .container 添加伪元素并从中删除 2 个不必要的背景来解决此问题。

.container {
  width: 300px;
  height: 150px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #eee;
  overflow: auto;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),rgba(0,0,0,0));
  background-position: 0 0, 0 100%;
  background-size: 100% 10px;
}

.container::before {
  content: "";
  position: relative;
  display: block;
  height: 30px;
  margin: 0 0 -30px;
  background: linear-gradient(to bottom, white, white 30%,rgba(255,255,255,0));
  z-index: -1;
}

.container::after {
  content: "";
  position: relative;
  display: block;
  height: 30px;
  margin: -30px 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), white 70%, white);
  z-index: -1;
}

.content {
  padding: 15px 10px;
  color: #555;
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iure repellendus tenetur totam possimus reiciendis error beatae nisi eligendi eveniet sit ullam, delectus dolorem voluptatum qui esse quod maxime praesentium cum perspiciatis dignissimos quam vero illum eius quisquam. Fugit ducimus repudiandae nisi corporis illo quo atque, aliquid. Perferendis labore vero quae officia eaque deserunt delectus, ipsa reiciendis vel eveniet, adipisci magni, possimus eum ipsum non laborum. Aspernatur iste, ratione eaque necessitatibus iure ipsum velit nobis quisquam explicabo quis voluptas inventore sapiente veniam, exercitationem assumenda natus eligendi! Soluta omnis blanditiis non dolor voluptates quo, est provident beatae enim id, numquam molestias placeat quibusdam. Facere expedita aliquam natus id nobis dolorem laboriosam omnis saepe, itaque adipisci, deleniti praesentium quidem maiores vitae, enim neque aperiam dolore impedit non illo accusamus ab consequatur quia vel. Fugit fugiat, quis iste sit recusandae maxime earum officiis. Temporibus doloremque quasi odit, voluptate, at, voluptates labore neque nesciunt tenetur voluptatum debitis aliquid delectus? Error architecto porro illo velit autem in voluptates cum accusantium aut maiores quam maxime consequuntur possimus labore commodi odit vero ipsam libero, aliquid iure quod temporibus, molestias delectus. Consectetur obcaecati, rem laborum tempore! Dolorem explicabo nisi accusamus qui soluta amet mollitia laboriosam illum molestias et.
  </div>
</div>