Member Avatar for Dani

Using a CSS background gradient and, in Chrome, it just shows up as solid black if the div is greater than 32,000 pixels.

background-color: white;
background-image: -webkit-linear-gradient(top, #EEE9F0 10%, white);
background-image: -moz-linear-gradient(top, #EEE9F0 10%, white);
background-image: -ms-linear-gradient(top, #EEE9F0 10%, white);
background-image: -o-linear-gradient(top, #EEE9F0 10%, white);
background-image: linear-gradient(to bottom, #EEE9F0, white);

Here's a live example (http://www.daniweb.com/software-development/c/threads/334260/a-simple-tic-tac-toe-c-programming) until/unless I find a solution.

  • 2 Contributors
  • 4 Replies
  • 237 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

This behavior is a known Chrome/Blink rendering quirk rather than a CSS syntax problem. Very tall backgrounds (roughly 32k pixels and above) can be rasterized into GPU textures; when the texture required exceeds the browser/GPU limit the gradient can fail and render as solid black or blocks. The border/box-layer interaction can also trigger the failure — moving the gradient off the exact element often fixes it. (stackoverflow.com)

Practical, CSS-only options (ordered by least invasive):

  • Move the gradient to a separate layer (preferred): use a positioned pseudo-element (::before/::after) or a child element to draw the gradient while the parent keeps borders/layout. This isolates the rendering and avoids the border-related bug. Example:

    .post {
  position: relative;
  outline: 1px solid #777; /* use outline/box-shadow instead of border if needed */
}

.post::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to bottom, #eee, #fff);
}

    Using outline or box-shadow to simulate a border often avoids the issue (see the StackOverflow troubleshooting above). (stackoverflow.com)

  • If you must keep the gradient on the same element: constrain the rasterized image (background-size) to a safe height and repeat it, or use an SVG background (vector) so it scales without being turned into a huge texture. Example SVG data-URI background:

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23eeeeee'/><stop offset='1' stop-color='%23ffffff'/></linearGradient></defs><rect width='1' height='100' fill='url(%23g)'/></svg>");
background-size: 100% 100%;

    SVG-as-background is well supported and avoids the raster-size ceiling. (developer.mozilla.org)

Quick checklist: prefer the pseudo-element or child-layer approach for a fast, reliable fix; use outline/box-shadow instead of border when practical; add a simple flat background-color fallback before gradient declarations so browsers that fail will at least show the intended base color. Test on desktop and mobile — GPU limits vary by device.

Recommended Answers

All 4 Replies

Member Avatar for Dani

I was able to come up with a not-so-elegant workaround that involves creating a dummy div and having the gradient render in that, so it's not dependent on the height of the post.

However, I still can't find a CSS-only workaround to the bug.

Member Avatar for Dani

Incidentally, my ideal solution would be to degrade nicely if it can't show the gradient instead of fill in as a solid black background.

Member Avatar for bradly.spicer

Have you tried doing this:

background-color: #ff0;
background-image: #ff0 -webkit-linear-gradient(top, #EEE9F0 10%, white);
background-image: #ff0 -moz-linear-gradient(top, #EEE9F0 10%, white);
background-image: #ff0 -ms-linear-gradient(top, #EEE9F0 10%, white);
background-image: #ff0 -o-linear-gradient(top, #EEE9F0 10%, white);
background-image: #ff0 linear-gradient(to bottom, #EEE9F0, white);

Try setting a base color first? Not sure if it works :P

Member Avatar for Dani

I think you're confusing the background property with the background-image property. Background-image can't set a base color.

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.