Проблема с несколькими фонами CSS в Chrome на экранах сетчатки - PullRequest
Новая
       18

Проблема с несколькими фонами CSS в Chrome на экранах сетчатки

0 голосов
/ 24 января 2019

Я пытаюсь добавить верхнюю и нижнюю тени в родительский контейнер при прокрутке содержимого.Он прекрасно работает везде, кроме 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

1 Ответ

0 голосов
/ 27 января 2019

Исправлено это путем добавления псевдоэлементов в .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>
...