From c6ef5edda3a2de19b58ab4606bd0408403db199e Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Mon, 27 Jun 2016 14:18:54 -0400 Subject: [PATCH] fix(progressButton): spiky diagonal lines (#533) The progress button exhibits spiky diagonals when used it with the "striped" modifier. This can be seen better when drastically reducing the animation speed. Turns out its a Webkit rendering bug. I've stumbled into dozens of "workarounds" on the internet (mainly Stack Overflow), however none of them fixed the issue. After some crazy amount of experimentation, the issue is gone if we add 1% to certain stop positions. Weird stuff. Fixes: https://github.com/resin-io/etcher/issues/472 Signed-off-by: Juan Cruz Viotti --- build/css/main.css | 2 +- .../progress-button/styles/_progress-button.scss | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) 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)); + } }