Avatar for Username

Шукати в статтях підтримки

Остерігайтеся нападів зловмисників. Mozilla ніколи не просить вас зателефонувати, надіслати номер телефону у повідомленні або поділитися з кимось особистими даними. Будь ласка, повідомте про підозрілі дії за допомогою меню “Повідомити про зловживання”

Докладніше

Ця тема перенесена в архів. Якщо вам потрібна допомога, запитайте.

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

  • 1 відповідь
  • 1 має цю проблему
  • 3 перегляди
  • Остання відповідь від 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...)

Усі відповіді (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/