Avatar for Username

Przeszukaj pomoc

Unikaj oszustw związanych z pomocą.Nigdy nie będziemy prosić Cię o dzwonienie na numer telefonu, wysyłanie SMS-ów ani o udostępnianie danych osobowych. Zgłoś podejrzaną aktywność, korzystając z opcji „Zgłoś nadużycie”.

Więcej informacji

Wątek został zarchiwizowany. Jeśli potrzebujesz pomocy, zadaj nowe pytanie.

I have a problem with my loading icon[png] in video tag.

  • 1 odpowiedź
  • 1 osoba ma ten problem
  • 9 wyświetleń
  • Ostatnia odpowiedź od guigs

Kchaan
Kchaan
more options

I have a keyframes animation on loading icon in video tag, with chrome is no problem but mozilla... The problem is that animation is played mutliple times and image is blinking. in css i have prefix -webkit- , -moz-, -ms- and none. I also tryed delete -moz- and a lot of other things, but it is still doing. The image was still being blinked even i delete all keyframes animations and nothing could do that (i didn't believe my eyes) but in chrome image was stopped only in mozilla it was still blinking and playing multiple times. here is some code(currently it is without -moz- prefix): .loading{ 

 position:absolute;

top:50%; left:50%; width:64px; height:64px; 

 margin-top: -32px;
 margin-left: -32px;

background:url(loading.png) no-repeat 50% 50%; z-index:2; display:none; 

 -webkit-animation: loading 1s infinite linear;
 -ms-animation: loading 1s infinite linear;
 animation: loading 1s infinite linear;
 }

@-webkit-keyframes loading { 

0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}

} @-ms-keyframes loading { 

0%{-ms-transform:rotate(0deg)}
100%{-ms-transform:rotate(360deg)}

} @keyframes loading { 

0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}

} Sorry for my english (i am from Slovakia) and thanks for solutions. (i have also tryed firefox in other notebook...)

I have a keyframes animation on loading icon in video tag, with chrome is no problem but mozilla... The problem is that animation is played mutliple times and image is blinking. in css i have prefix -webkit- , -moz-, -ms- and none. I also tryed delete -moz- and a lot of other things, but it is still doing. The image was still being blinked even i delete all keyframes animations and nothing could do that (i didn't believe my eyes) but in chrome image was stopped only in mozilla it was still blinking and playing multiple times. here is some code(currently it is without -moz- prefix): .loading{ position:absolute; top:50%; left:50%; width:64px; height:64px; margin-top: -32px; margin-left: -32px; background:url(loading.png) no-repeat 50% 50%; z-index:2; display:none; -webkit-animation: loading 1s infinite linear; -ms-animation: loading 1s infinite linear; animation: loading 1s infinite linear; } @-webkit-keyframes loading { 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-ms-keyframes loading { 0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(360deg)} } @keyframes loading { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } Sorry for my english (i am from Slovakia) and thanks for solutions. (i have also tryed firefox in other notebook...)

Wszystkie odpowiedzi (1)

guigs
guigs
more options

Most of this information can be found in detail in Mozilla's MDN wiki:

If we cannot find a basic solution here, asking in stackoverflow.com and tagging it Firefox will get the attention of the dedicated Firefox developer's support.

In the meantime the test on this documented page is linked here:


Two things I learned from this:

  • @keyframes do not work if the css is inline
  • hidden overflow will help some issues with multiple screensizes

I did notice a little lag, but I do have a slow internet connection at the moment.

I did stumble upon this trick that mentions that sometimes there is flickering with the hidden element: https://css-tricks.com/almanac/proper.../backface-visibility/