Chrome's struggle with displaying multiple backgrounds on retina screens due to CSS complications

My goal is to create top and bottom shadows for a parent container when scrolling through the content. This effect works perfectly everywhere except on Chrome browser with retina screens, where it behaves strangely. The background becomes stuck at the top, bottom, or both positions.

.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, vol...
  </div>
</div>

I suspect that the issue may be related to the background-attachment property.

Video:

htmlcssgoogle-chromeretina-display

Answer №1

Resolved the issue by incorporating pseudo elements into .container and eliminating 2 redundant 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;
}

.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));
}

.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);
}

.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... 
  </div>
</div></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving overlapping div layouts with CSS styling

Displayed above are 4 different divs: red, green, and blue. I am seeking to have the blue div positioned directly below the green div, which contains the text "JACKSON". Additionally, I do not want the green div to expand beyond its content, nor do I want ...

htmlcss

Utilizing External Libraries Added Through <script> Tags in React

My goal is to develop a Facebook Instant HTML5 application in React. Following their Quick Start guide, Facebook requires the installation of their SDK using a script tag: <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></scrip ...

javascripthtmlreactjstypescriptfacebook-instant-games

Input field, upon receiving focus, triggers a subtle shift in the position of the submit button

Thank you for the assistance, I believe this issue should be an easy fix. I have added a custom :focus style to my input that removes the default outline and adds a box shadow and border. However, when the input field is focused, the submit button located ...

cssforms

Switch between webpage design for different devices (mobile/desktop) using javascript, jquery, and bootstrap

I am currently working on a webpage that contains various html elements with bootstrap classes applied to them. <div class="col-xs-12 col-lg-4"></div> My goal is to implement a button that, when clicked, will toggle the viewport/layout change ...

jquerycssresponsive-designbootstrap-4viewport

Populating fields in a new AngularJS document from a table

I have a project where there is a table displaying different instances of our service, and each row has an info button that opens a form with the corresponding row's information autofilled. However, I am facing an issue where by the time I retrieve th ...

javascripthtmlangularjsweb

Import css background-images from a separate local directory that is located outside the root directory of the Next JS

I am facing a challenge with hosting a next.js app within the file structure of a parent website. I need the CSS in the app to use images that are located outside the app's file structure but within the parent website's file structure. Here is a ...

javascriptcssreactjsnext.js

Navigating through Ruby on Rails' index routes

I have set up an index for the object "request". Each request has an address and a body. I configured the index to display the address as a link, with the intention of directing users to the show page of that specific object. However, when I click on the l ...

htmlruby-on-railsruby

What is the best way to divide data using [/ -]?

I am trying to split a string that shows a date. The date is shown in the format dd/mm/yyyy or dd-mm-yyyy. This is my code (the current string is formatted as mm/dd/yyyy): <input type="data" id="dat"> ..... var dataString=$('#dat').val(); ...

jqueryhtmldate-formatting

Designing Forms with Label Placement above Input Fields

I am working on creating a form with the following layout: <form name="message" method="post"> <section> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> <label for="email"& ...

htmlcss

Tips for combining a linear-gradient and background-image on a single element:

Is it possible to apply a linear-gradient color along with a background-image on the same div element in HTML? I've been trying to achieve this but haven't been successful so far. Any suggestions would be greatly appreciated. Below is the snippe ...

htmlcssbackground-imagelinear-gradients

Obtaining a URL in JavaScript

Hey there, I'm diving into the world of JavaScript and could use some guidance. I'm currently working on implementing forward and backward buttons on a webpage. The URL structure is http://webaddress.com/details?id=27 My goal is to write two fun ...

javascripthtml

Circular picture contained within a Bootstrap column on an irregularly-shaped image file

I am looking to create a circular effect for an image that is originally rectangular, resembling a typical profile picture. I have come across several sources on how to do this. The challenge arises in trying to achieve this effect within a bootstrap colu ...

htmlcsstwitter-bootstrap

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

htmlcsstwitter-bootstrap

What is the significance of the A tag when parsing a URL?

So, I encountered a problem that involved parsing a URL to extract the hostname and pathname, then comparing the extracted pathname with a string. If you need help with this issue, check out this post: How do I parse a URL into hostname and path in javasc ...

javascripthtmldom

Load additional content seamlessly using Ajax in Django without needing to reload the entire navigation bar

I recently started working with Django as I develop my own website. I have created a base.html file which includes the main body, CSS, js, fonts, and navbar that will be present on all pages of my site. The navbar is located in another HTML file called nav ...

pythonhtmldjangoajax

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

cssangularangular-material

Guide for positioning buttons in front of an image using HTML and CSS

I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation: <!-- Image where buttons should be placed ...

htmlcssbootstrap-4

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

jquerycssopacity

Issue with text decoration in Html, Css, and Bootstrap

this image shows the issue Hi there, I'm facing an issue with my project involving bootstrap. Whenever I include bootstrap in my project using a link, all "a" tags end up with text decoration. How can I fix this problem? ...

htmlcssbootstrap-5