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

Disregard any labels when it comes to clickable areas for mouse events

Here is a simple example in JSFiddle where a text is displayed over an image inside a div element. Depending on where the cursor hovers, it can exhibit three different behaviors: pointing hand over the image, allowing text selection over the content of the ...

javascriptjqueryhtmlcss

Finding Elements in a Frameset in HTML with the Help of Selenium WebDriver

Below is the HTML code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ... (truncated for brevity) ... </html> I am specifically inter ...

htmlxpathselenium-webdriverframesframeset

Troubleshooting issue with Calendar styling in Bootstrap and SimpleCalendar Rails integration

I am having trouble applying styling to my SimpleCalendar in Rails, using the gem. When I render it, this is what I see: Here is the CSS provided by https://github.com/excid3/simple_calendar: .simple-calendar { table { -webkit-border-horizontal-spac ...

cssruby-on-railsrubytwitter-bootstrap

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

Preventing CSS shapes from overlapping with the next DIV

I'm currently working on creating a V-shape using CSS. While I have successfully created the shape, I am facing an issue where I cannot get the shape to appear "above" another div with a background image when it is placed before it and made negative. ...

csstwitter-bootstraptwitter-bootstrap-3shapes

Generating values in a loop - mastering the art of creating data points

My goal is to create a variable within a loop: box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFFand so on... The concept is simple: box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff. I attempted to achieve this ...

cssless

Encountering an unusual hash code when implementing Google Tag Manager in a Next.js project was

I am currently using Next.js and have added Google Tag Manager through a script <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var ...

javascripthtmlreactjsnext.jsfrontend

A pale tooltip with a light arrow appearing against a soft white backdrop

Can someone help me figure out how to display a white tooltip with a white arrow? I've tried to implement it using the code below, but the white color is not visible against the background. Any suggestions on making it stand out? $(function () { ...

javascripthtmljquerycsstooltip

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

javascripthtmlcss

Firebase authentication encountered an error due to a network request failure

Utilizing firebase Hosting to host my website, I am encountering a persistent error when attempting to login using email/password. This is the JavaScript code that I am using: window.onload = () => initApp(); //Initialize screen function initApp(){ ...

javascripthtmlfirebasefirebase-authentication

Transforming a Bootstrap Background Image to a Captivating Video Display

Here is the CSS code snippet that I'm having trouble with: .masthead { position: relative; width: 100%; height: auto; min-height: 35rem; padding: 15rem 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75% ...

htmlcssvideobackground

Using PHP header function to redirect to a specific form on an HTML page: A step-by-step guide

I have a dilemma in my web project. In the index.php file, there are two forms that utilize transitions to switch between pages (Login and Register). When attempting to register a new user in the backend, I check if the user already exists. If they do exis ...

phphtmlforms

Leveraging the power of Javascript and Firebase within the Angular framework

When attempting to integrate Firebase with Angular, I encountered an issue where my localhost was not able to function properly with my JavaScript code. The strange thing is that everything works fine when the code is placed directly in the index.html file ...

javascripthtmlangularfirebasefirebase-realtime-database

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

htmlcss

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe

Connect ngx-time picker to form input in Angular

Currently, I have successfully implemented Angular material date pickers in my project, however, I am facing a challenge with integrating time pickers as it is not natively supported by Angular Material for version 8. To address this issue, I am utilizing ...

htmlangulartypescriptangular-material

Combine multiple values into a single input in the number field

I have a number type input field... What I am looking for is: Age-Height-Weight 20-180-80 Is there a way to ensure that users input data in this exact format and then have the final result inserted into the input field with type="number" and submitted? ...

javascripthtmljquerycssnode.js

Using R programming language to download PDF files from a website through web scraping

Looking for assistance in R coding to automatically download all the PDFs linked on this URL: . The goal is to save these PDFs into a designated folder. I've attempted the following script with guidance from , however, it's resulting in errors: l ...

htmlrjsonurlweb-scraping

bridging information from tables with text fields in forms

I am working on an HTML/CSS page that utilizes a table layout filled with buttons to mimic a T9 keypad design. Within the page, I have a form containing two text fields. My aim is to populate these text fields with numbers based on the values from the tab ...

javascripthtml

Troubleshooting CSS Code Issues on Myspace

Greetings! I am currently working on enhancing a friend's profile on myspace.com. I have two divs on each side of the screen that I want to align next to each other. I have tried using float: left; and float: right;, as well as experimenting with marg ...

cssmyspace