Avatar for Username

Prohledat stránky podpory

Vyhněte se podvodům. Za účelem poskytnutí podpory vás nikdy nežádáme, abyste zavolali nebo poslali SMS na nějaké telefonní číslo nebo abyste sdělili své osobní údaje. Jakékoliv podezřelé chování nám prosím nahlaste pomocí odkazu „Nahlásit zneužití“.

Zjistit více

Toto vlákno bylo archivováno. Pokud potřebujete pomoci, založte prosím nový dotaz.

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

  • 1 odpověď
  • 1 má tento problém
  • 9 zobrazení
  • Poslední odpověď 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...)

Všechny odpovědi (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/