Member Avatar for greenglow

We are struggling with an intermittent rendering issue, mostly in Chrome, although some have seen it on PC wit IE.

The left side text (I've attached an image)renders outside the page, caused by a background image loading problem.

This is built on a framework called Builder so their are several style sheets.

Any insight as to how to fix this is greatly appreciated.

Thank you

Rendering_MPO.JPG 151.48 KB
  • 2 Contributors
  • 5 Replies
  • 207 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by greenglow

Dani AI

Generated

A few targeted notes and practical fixes that complement the testing already done by and .

This looks like an intermittent Chrome repaint/paint-order problem where the background image sometimes fails to paint on refresh and the layout that depends on that visual cue shifts. The useful clue from — that changing where the background is declared altered the failure rate — suggests the issue lives in stylesheet order/placement and the browser paint pipeline rather than in malformed HTML.

Quick diagnostic checklist

  • Reproduce with DevTools open: F12 -> Network -> check "Disable cache" -> reload and watch the background image status/timing.
  • In Elements, toggle the background rule and inspect computed box sizes and overflow to see if layout depends on the image.
  • Look for late-loading CSS (multiple Builder stylesheets can cause overrides) and JS that toggles classes early in page load.
  • Temporarily replace the background with a solid color or an inline <img> (with width/height) to confirm whether the image is structural.

Practical, low-risk workarounds

  • Force a repaint/compositing on the affected container to reduce repaint glitches:
.page-wrap {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
  • Preload the image with JS and reveal the layout after load:
<script>
var bg = new Image();
bg.onload = function(){ document.documentElement.classList.add('bg-loaded'); };
bg.src = '/path/to/main_back.jpg';
</script>

Then use .bg-loaded to apply/enable the background or show content (careful of FOUC).

Longer-term notes

  • Avoid driving structure from decorative backgrounds; use real <img> elements with dimensions for any image that affects layout.
  • Simplify stylesheet loading order in the Builder setup so critical background rules are applied early.
  • Test changes with DevTools "Disable cache" and across Chrome versions; the transform/will-change hacks can help but create new stacking/antialiasing side effects, so validate across browsers.

Recommended Answers

All 5 Replies

Member Avatar for pixelsoul

I am unable to reproduce the problem using the latest version of Chrome and IE8.

Member Avatar for pixelsoul

I am unable to reproduce the problem using the latest version of Chrome and IE8.

Nevermind, I see that it only happens for me when I try to refresh the browser using chrome. When I do this part of the image in the background is not showing. I can't get the same in IE.

I think it has something to do with the way Chrome handles loading background images. It also is probably a combination of poorly written code. No offense intended but these are the type of problems you see when one uses an editor to build the site. Sometimes they don't always get it right and jumble the code up trying to accomplish what the user is trying to do visually.

Member Avatar for greenglow

No offense taken. However we've done over 100 Wordpress sites without such problems.
This validated with 1 css error and 5 minor html errors, which is a relatively small compared to 95% of the sites we see.
It is indeeed related to how chrome handles background images. There is a great deal of discussion around the web. However no answers were found. Our hope was to find an expert in Chrome issues.
Still, if you see any garbled code, pointing it out would make it actionable. Do you see anything specifically actionable.

Member Avatar for pixelsoul

No offense taken. However we've done over 100 Wordpress sites without such problems.
This validated with 1 css error and 5 minor html errors, which is a relatively small compared to 95% of the sites we see.
It is indeeed related to how chrome handles background images. There is a great deal of discussion around the web. However no answers were found. Our hope was to find an expert in Chrome issues.
Still, if you see any garbled code, pointing it out would make it actionable. Do you see anything specifically actionable.

Hi again, I don't run into many issues with Chrome or Firefox but rather IE :( of course.

I downloaded the site and started to play around with it a bit. I was able to reproduce the problem locally on my machine here and so I started changing the CSS a little like using background-image, background-repeat, and background-position to see if that would have any affect but it did not.

Then I put html before body and tried to reproduce the problem again. Out of the 50 or so refreshes I did on the page I only say it one time and that may have just been caching since it was at the beginning of the refreshing I was doing.

I believe that this has to do with the way Chrome goes through the DOM and maybe specifying html before body was enough to help with the problem since html comes before body of course.

Here is the change I made:

html,body
{
	background:#5A4226 url(images/main_back.jpg)top center no-repeat;
	font: 13px "verdana";
}

You may want to take that for a spin and see if the problem still exists as much if at all after that.

Member Avatar for greenglow

Awesome thanks. I found some discussions that had fixes in which the developer move the background properties from the body element to the html element as Chome fix. Perhaps this is what you're hitting on. Apparently this is a Chrome bug.
We'll try what you suggest and work from there.
We greatly appreciate you efforts-thanks for taking the time to work on this!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.