Print Progress Bar Background Color in Chrome

I’m working on a project today that uses Twitter Bootstrap, displays progress bars, and has a requirement to print those progress bars. Sadly, Chrome doesn’t like to print background colors by default, so printing the progress bars didn’t work so well. Here’s the trick to get it to work: -webkit-print-color-adjust:exact. This instructs Chrome to print the background color.

After that, adding a few more styles (in a print stylesheet) makes for nice-looking progress bars (SCSS):

.progress {
  background-image: none;
  -webkit-print-color-adjust: exact;
  box-shadow: inset 0 0;
  -webkit-box-shadow: inset 0 0;

  .bar {
    background-image: none;
    -webkit-print-color-adjust: exact;
    box-shadow: inset 0 0;
    -webkit-box-shadow: inset 0 0;
  }
}