Disappearance of CSS background images in Chrome

This specific issue seems to be isolated to Google Chrome running on Mac OS X (Chrome 17). I have conducted tests on all the major browsers on both Mac and Windows 7.

The problematic page can be found here:

The page utilizes JQuery AJAX to load divs. On initial load or refresh, everything appears normal. However, the problem arises when navigating between pages, especially while scrolling quickly. Try rapidly scrolling down the page and then hitting the right arrow.

At that point, background images that were initially loaded via CSS, like:

.sort_block{ background: url(images/sort_block.png) no-repeat;}

begin to vanish. Strangely, only background images loaded with CSS are affected, while others remain intact. Even on the Google Chrome Inspector, the syntax seems correct, and the image has been cached, yet it fails to display. Modifying a property like "top: 8px;" to "top: 9px;" causes the image to suddenly reappear.

This issue appears exclusive to Chrome versions 17 and Chrome Canary v. 19 on Mac OS X (10.7.3). Should I bring this bug to the attention of Google, or is there a known workaround or fix available? I could resort to replacing the CSS-loaded images with HTML-loaded ones, but I would prefer to address this problem correctly.

cssmacosgoogle-chromebackgroundbackground-image

Answer №2

After spending countless hours trying to debug, I finally discovered that the issue was not with the code itself, but rather a memory-related bug in the latest version of Chrome. Interestingly, it seems that this bug only affects larger images. A quick fix for now is to reduce the file size to less than 10kB.

For a visual demonstration, I have prepared a test file that showcases the difference between a large and a small background image.

http://example.com/chrometest

Answer №3

We came up with a solution to address this issue until Chromium/Chrome resolves the problem (hello, Milton)...

One of my coworkers, Andrew, shared our fix here:

You can view the problematic page here:

It seems like this solution has also helped others, even though it's not the most elegant fix!

Answer №4

Nowadays, I encountered a similar problem and the solution turned out to be using the absolute URL instead of a relative path.

For instance, replacing url(images/image.png)

with

url("http://example.com/images/image.png")

Answer №5

To fix the issue, employ the :url(.//images path. The use of .// should provide a solution.

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

The styling in Docker for Asp.Net Core is not being properly displayed

I recently deployed my first ASP.NET Core application using Visual Studio for Mac inside a Docker container on Linux. However, I'm facing an issue where the CSS is not being applied and the JavaScript is not functioning as expected. It seems like the ...

cssasp.netdocker

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: https://i.sstatic.net/BH7Su.png Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap ...

htmlcsstwitter-bootstrap-3flexboxgrid

A step-by-step guide on crafting a triangular-shaped div connected to another div

After working with HTML elements and trying to incorporate 2 divs, I realized that I couldn't achieve the triangle-shaped div that I actually needed. I have included an image for reference. Below is the HTML code snippet: <div style="background-c ...

htmlcss

Overflowing CSS grid issue

I've been working on this for a couple of hours, but I haven't been able to get it right. I want to add labels in a grid layout with a maximum of 3 columns. If the items don't fit, they should wrap to the next row. It would be great if the i ...

htmlcsscss-grid

Maintain the fixed position of the table header while scrolling

I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body. Here is how my table structure looks: <table> <thead> <tr> <th>Header 1</th> ...

jqueryhtmlcsshtml-tablecss-position

Tips on aligning a span inside a div to the right and ensuring the text is responsive

I want to enhance my bar designing skills. I managed to create one, but I'm facing some issues. How can I make this span align to the right? I tried using float but it didn't work. Any suggestions? Also, when I try to shrink the screen, the text ...

htmlcssresponsive-designposition

The problem with clearing floats in IE7 (as well as 6)

Currently, I am facing an issue where I have a list that I want to split into three columns by using the float left property and then clearing the first column. Everything seems to be working fine in IE8 and FF, however, IE7 is causing the second column t ...

cssinternet-explorer-7

Apply a border around every digit within a division

Is there a way to add a border to each individual number within a div? I already know how to add a border to a div as a whole, but I specifically want each number inside the div to be bordered. For example: <div id="borders">12345</div> The ...

phpcssstring

Fixing the issue with CSS scrollbar swapping

I'm currently working on a template and facing a challenge that I can't quite comprehend. More specifically, I understand why it's happening, but I'm struggling to implement a cross-browser solution. The issue revolves around a fixed b ...

htmlcss

Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it usin ...

htmlcsspure-css

Enhancing the responsiveness of images compared to regular images by resizing and locking them in place

I'm struggling with adjusting the responsiveness of my icons around the main wheel to changes in page size. Currently, they are not staying put relative to the middle wheel when the page size increases or decreases. I also need the wheel and icons to ...

htmlcssresponsive-designbootstrap-4

Managing the vertical dimensions of a div

I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically ...

htmlcssangular

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...

htmlcssresponsive-design

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

htmlcsssafariflexbox

Creating a scrollable element in Tailwind without the need for a scrollbar is easier than you think

Is there a way to create a horizontal scroll navbar using Tailwind CSS without a scrollbar at the bottom, similar to this example (try reducing the width of your screen to see the scroll effect)? https://getbootstrap.com/docs/5.0/examples/blog/ I attempt ...

cssbootstrap-4tailwind-cssbootstrap-5

Quicker loading times for background images when creating PDFs using wkhtmltopdf

As I work on generating a 5-page PDF from my HTML file using wkhtmltopdf, everything seems to be running smoothly. However, I've encountered an issue when it comes to the time it takes to complete this task, especially when a background image is inclu ...

htmlcsspdf-generationwkhtmltopdfhtml-to-pdf

Adjusting webpage background with JavaScript

I've been struggling with this for the past six hours and can't seem to get it right. I've checked out various solutions on Stack Overflow, but nothing seems to work. What am I missing here?!? My html5 page doesn't have a background an ...

javascriptjqueryhtmlcss

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

htmlcss

An inexplicable right margin

I am facing an issue with centering a table (a tracklist) under the album cover and title. There seems to be an unexpected margin on the right side that I can't seem to figure out. Any help in identifying the cause of this issue would be greatly appre ...

htmlcsshtml-table

Adsense Responsive Ads by Google Are Not Displaying

Click on this link to see 3 different types of ads - Right, Left, and Header Ads. These ads are supposed to be responsive and have an "Active" status. However, the issue is that the Responsive ads are not displaying properly. After some research, it seems ...

htmlcssadsense