CODEWITHSUNDEEP
cssgoogle-chromeprintingbackgroundborder
Abdellatif Badidi
Abdellatif Badidi

Reputation: 81

Linear Gradient Background disappears when printing a CSS object with a linear gradient and a border

If you try to print the following page using chrome, you will get a black background. The background can be printed if you delete the border. Please make the test. Is it a Bug in Chrome ? 

<style>
#div1{
  width:340px;height:150px;
  border:1px solid #000;
  background:linear-gradient(#fff,#0cf);
}
</style>
<div id=div1>
  Something
</div>

Thnks

Upvotes: 8

Views: 4477

Answers (3)

Sivarajan Sivanesan
Sivarajan Sivanesan

Reputation: 172

I have also faced the same issue, but realized that it was not css problem. It could be problem with print option. Enable "Background Graphics" in print screen.

enter image description here

Upvotes: 5

Thistledowne
Thistledowne

Reputation: 164

Version M42 of Chrome is out of beta and pushed so this regression error should no longer exist if users' browsers are up-to-date.

Upvotes: 0

Thistledowne
Thistledowne

Reputation: 164

I believe I am also having the same problem. Print Preview and Print output from Chrome 41.0.2272.101m appears thus:

Print Output from Chrome v41.0.2272.101m (screencapture)

While Firefox prints correctly (though not attractively) Firefox 32.0.2 (crop from Acrobat Distiller PDF output)

That region consists of a gradient fill

.greenRedGradient
{
    background: #00aa00; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  #00aa00 0%, #ffff00 50%, #ff0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00aa00), color-stop(50%,#ffff00), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* IE10+ */
    background: linear-gradient(to right,  #00aa00 0%,#ffff00 50%,#ff0000 100%); /* W3C */
    padding:3px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa00', endColorstr='#ff0000',GradientType=1 ); /* IE6-8 */
}

Surrounded by a rounded corner border on the bottom/sides

.areaGroup > footer > div:last-child {
    width:66%; overflow:hidden; border:2px solid black; border-top:0; padding:0 4px; padding-top:2px;
    webkit-bottom-left-border-radius: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-left-radius: 8px;
    webkit-bottom-right-border-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px;
}

The offending div in question:

<div class="greenRedGradient">
    <img src="/img/FeedbackFormArrows-Strength.png" style="float:left;" alt="Feedback form arrow indicating strength"/>
    <div style="margin-left:94px;">
        <img src="/img/FeedbackFormArrows-NeedsAttention.png" style="float:right;" alt="Feedback form arrow indicating need of attention">
        <div style="background:url(/img/FeedbackFormArrows-Dash.png) repeat-x; height:32px; margin-right:145px;"></div>
    </div>
</div>

I can comment out the three PNGs (transparent backgrounds) for the Strength <, the ---dashes---, and the > Needs Attention, and it makes no difference in how Chrome prints the gradient.

I don't think it makes a difference, but preemptively expecting the question, the 6 color regions vertically above the misprinting region are done so with 20% Alpha transparency using RBGA CSS codes as follows, and as shown, they print correctly:

.r21{ background: rgba( 031, 183, 000, 0.20 ); }
.r22{ background: rgba( 127, 228, 000, 0.20 ); }
.r23{ background: rgba( 224, 255, 000, 0.20 ); }
.r24{ background: rgba( 255, 230, 000, 0.20 ); }
.r25{ background: rgba( 255, 134, 000, 0.20 ); }
.r26{ background: rgba( 255, 033, 000, 0.20 ); }

I -believe- this is a recent issue and that it used to print correctly, but I cannot say at all for certain, so I don't consider it relevant/trustworthy information.

Upvotes: 0

Related Questions