Jag har gjort en CSS-style för Spotify. Allt fungerar som jag vill ha det i Firefox, men animeringarna blir "blurriga", oskarpa, i Chrome.
Jag ska villigt medge att jag inte aktivt använder Chrome själv, utan mer som en service gjort min style tillgänglig även för Chrome-användare.
Men att det verkar vara ett vanligt fenomen att CSS-animeringarna i Chrome blir just oskarpa har jag ju förstått när jag googlat runt.
Jag har försökt med "samtliga" förslag till fixar jag kommit över men inga tycks fungera.
Bifogar det aktuella avsnittet i nuvarande kod:
[En annan udda effekt är att när man klickar på denna Spotify-logga är det meningen att det ska skapas en glow-effekt (görs med box-shadow). Detta funkar oavsett om animeringen är aktiverad eller inte aktiverad i Firefox, medan den bara fungerar när animeringen är inaktiverad i Chrome.]
Någon vänlig själ där ute som har förslag på hur jag ska få det att funka även i Chrome?
Jag ska villigt medge att jag inte aktivt använder Chrome själv, utan mer som en service gjort min style tillgänglig även för Chrome-användare.
Men att det verkar vara ett vanligt fenomen att CSS-animeringarna i Chrome blir just oskarpa har jag ju förstått när jag googlat runt.
Jag har försökt med "samtliga" förslag till fixar jag kommit över men inga tycks fungera.
Bifogar det aktuella avsnittet i nuvarande kod:
Citat:
Ingår i min userstyle för Spotify, för den som vill testa problemet själv. Animeringen ovan skapar en roterande Spotify-logga i övre vänstra hörnet.
.logo svg {
transform: rotate(10deg);
box-shadow: inset 30px 0 8px rgba(0, 0, 0, .5), inset -30px 0 8px rgba(0, 0, 0, .4), 0px 0px 1px 1px rgb(0, 0, 0);
background-color: var(--marker);
height: 100%;
margin: 0 auto;
border-radius: 100% !important;
width: 65%;
padding-top: 1px;
padding-bottom: 1px;
border-left: 3px dashed #fff !important;
border-right: 3px dashed #fff !important;
-webkit-animation: painter 1000s infinite ease-in-out, shadower 207s infinite ease-in-out, rotater 133s infinite linear ;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;}
transform: rotate(10deg);
box-shadow: inset 30px 0 8px rgba(0, 0, 0, .5), inset -30px 0 8px rgba(0, 0, 0, .4), 0px 0px 1px 1px rgb(0, 0, 0);
background-color: var(--marker);
height: 100%;
margin: 0 auto;
border-radius: 100% !important;
width: 65%;
padding-top: 1px;
padding-bottom: 1px;
border-left: 3px dashed #fff !important;
border-right: 3px dashed #fff !important;
-webkit-animation: painter 1000s infinite ease-in-out, shadower 207s infinite ease-in-out, rotater 133s infinite linear ;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;}
[En annan udda effekt är att när man klickar på denna Spotify-logga är det meningen att det ska skapas en glow-effekt (görs med box-shadow). Detta funkar oavsett om animeringen är aktiverad eller inte aktiverad i Firefox, medan den bara fungerar när animeringen är inaktiverad i Chrome.]
Någon vänlig själ där ute som har förslag på hur jag ska få det att funka även i Chrome?
