Funkcionalnosć tutoho sydła so přez wothladowanske dźěła wobmjezuje, kotrež maja waše dožiwjenje polěpšić. Jeli nastawk waš problem njerozrisuje a chceće prašenje stajić, wobroćće so na naše zhromodźenstwo pomocy, kotrež na to čaka, wam na @FirefoxSupport na Twitter a /r/firefox na Reddit pomhać.

Avatar for Username

Pomoc přepytać

Hladajće so wobšudstwa pomocy. Njenamołwimy was ženje, telefonowe čisło zawołać, SMS pósłać abo wosobinske informacije přeradźić. Prošu zdźělće podhladnu aktiwitu z pomocu nastajenja „Znjewužiwanje zdźělić“.

Dalše informacije

Tuta nitka je so archiwowała. Prošu stajće nowe prašenje, jeli pomoc trjebaće.

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

  • 1 wotmołwa
  • 1 ma tutón problem
  • 9 napohladow
  • Poslednja wotmołwa wot 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...)

Wšě wotmołwy (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/