CSS multiple backgrounds issue in Chrome on retina screens - html

Question

What I'm trying to do is to add top and bottom shadows to a parent container on content scrolling. It works nicely everywhere except Chrome on retina screens. It behaves weird. When content gets scrolled the background is stuck on top, bottom or both.
.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>
I speculate that background-attachment property causes it somehow.
Video: https://monosnap.com/file/uIWzofapTsteYNuv3tkdO9kWM1PjCv

Answer 1

Fixed that by adding pseudo elements to .container and removed 2 unnecessary backgrounds from it.
.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>