Slider, LinearProgress, and Switch are invisible in print ink save mode

[gfeller]

The slider component cannot be printed.

Current Behavior 😯

Print-View:

Steps to Reproduce 🕹

Go to https://material-ui.com/components/slider/
Press "print" in Chrome or Firefox.

[oliviertassinari]

@gfeller Thanks for raising, this is an interesting issue. The slider isn't visible because of the default setting of your browser. It ignores the background colors and images.

I could reproduce the same problem with the Switch component:

the LinearProgress:

The motivation behind this behavior seems to be about saving people's ink. In our case, it kills all the information, I think that we should force the display: https://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css/21160150#21160150.

What do you think of this diff? Do you want to submit a pull request? :)

diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js
index 130423d78..dc1a4f73e 100644
--- a/packages/material-ui/src/LinearProgress/LinearProgress.js
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.js
@@ -21,6 +21,10 @@ export const styles = (theme) => {
       position: 'relative',
       overflow: 'hidden',
       height: 4,
+      // Force Chrome and Safari to display the component on print mode.
+      '@media print': {
+        WebkitPrintColorAdjust: 'exact',
+      },
     },
     /* Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant="buffer"`. */
     colorPrimary: {
diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 7bbccea06..6bb5c96ff 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -156,6 +156,10 @@ export const styles = (theme) => ({
         padding: '0 20px',
       },
     },
+    // Force Chrome and Safari to display the component on print mode.
+    '@media print': {
+      WebkitPrintColorAdjust: 'exact',
+    },
   },
   /* Styles applied to the root element if `color="primary"`. */
   colorPrimary: {
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index 49b4a71f5..832cd8d70 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -22,6 +22,10 @@ export const styles = (theme) => ({
     flexShrink: 0,
     zIndex: 0, // Reset the stacking context.
     verticalAlign: 'middle', // For correct alignment with the text.
+    // Force Chrome and Safari to display the component on print mode.
+    '@media print': {
+      WebkitPrintColorAdjust: 'exact',
+    },
   },
   /* Styles applied to the root element if `edge="start"`. */
   edgeStart: {

[coktopus]

#20749

[oliviertassinari]

@gfeller For curiosity, how do you end-up uncovering this issue? What's your use case for printing a slider? :)