jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 07:17:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(progressButton): spiky diagonal lines (#533)

Browse Source 
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 <jviottidc@gmail.com>
This commit is contained in:
Juan Cruz Viotti 2016-06-27 14:18:54 -04:00 committed by GitHub
parent 1a49b36a14
commit c6ef5edda3
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/css/main.css
View File

@ -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;

12
lib/gui/components/progress-button/styles/_progress-button.scss
View File

@ -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));
}
}