diff --git a/build/css/main.css b/build/css/main.css index 5e11ce2a..ee32e6e8 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -6376,7 +6376,7 @@ button.btn:focus, button.progress-button:focus { background: #6ca1e0; } .progress-button--primary.progress-button--striped { - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #3b679b), color-stop(0.25, #5c93d6), color-stop(0.5, #5c93d6), color-stop(0.5, #3b679b), color-stop(0.75, #3b679b), color-stop(0.75, #5c93d6), to(#5c93d6)); } + background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #3b679b), color-stop(0.26, #5c93d6), color-stop(0.5, #5c93d6), color-stop(0.51, #3b679b), color-stop(0.75, #3b679b), color-stop(0.76, #5c93d6), to(#5c93d6)); } .progress-button--primary[active="true"]:active { box-shadow: none; diff --git a/lib/gui/components/progress-button/styles/_progress-button.scss b/lib/gui/components/progress-button/styles/_progress-button.scss index aec703c2..3337be3c 100644 --- a/lib/gui/components/progress-button/styles/_progress-button.scss +++ b/lib/gui/components/progress-button/styles/_progress-button.scss @@ -62,14 +62,20 @@ $progress-button-stripes-animation-duration: 1s; $progress-button-stripes-color: desaturate(darken($brand-primary, 18%), 20%); &.progress-button--striped { + + // Notice that we add `0.01` to certain gradient stop positions. + // That workarounds a Chrome rendering issue where diagonal + // lines look spiky. + // See https://github.com/resin-io/etcher/issues/472 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, $progress-button-stripes-color), - color-stop(0.25, $progress-button-stripes-background-color), + color-stop(0.25 + 0.01, $progress-button-stripes-background-color), color-stop(0.50, $progress-button-stripes-background-color), - color-stop(0.50, $progress-button-stripes-color), + color-stop(0.50 + 0.01, $progress-button-stripes-color), color-stop(0.75, $progress-button-stripes-color), - color-stop(0.75, $progress-button-stripes-background-color), + color-stop(0.75 + 0.01, $progress-button-stripes-background-color), to($progress-button-stripes-background-color)); + } }