CSS 在视网膜屏幕上 Chrome 出现多重背景问题

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>

我推测背景附件属性以某种方式导致了它。

视频：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>

CSS 在视网膜屏幕上 Chrome 出现多重背景问题

CSS multiple backgrounds issue in Chrome on retina screens

html

css

google-chrome

retina-display