Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

Learn More

Page animation doesn't trigger unless I move mouse

  • 답글 없음
  • 1 이 문제를 만남
  • 33 보기
more options

Hi team!

I have a dev project which uses keyframes to animate some svg elements. This animation starts immediately (page load).

The animation has no problems running on chrome and safari but for some reason it has very weird behavior on firefox.

The animation, if there is no mouse movement, will simply not play through until the mouse is active in the view port. As soon as the mouse stops, the animation stops. If the dev tools panel is open and the mouse is active in that pane the animation doesn't run either. The active mouse specifically needs to be in the view port for the animation to run.

Furthermore if there are no animation-delays properties the animations run fine, however not in the intended order of course.

I have attached 2 gif's one showing the animation playing fine on a chrome browser and the other animating every now and then whenever I nudged the mouse. Sadly the mouse doesn't show because "gif".

I mainly develop on linux and I can confirm firefox(81.0.164bit) on both linux and macbook have this behavior.

I read about malware possibly causing an issue etc but a fresh Pop_OS install exhibited the same behavior.

I have resorted to installing chromium which makes me extremely sad. :(

I am happy to be as much help as possible, you need a screen capture, more gifs, hell even zoom call, i'll do it in a second.

The css is as follows -

@keyframes _a7af7bf0 { 0% {opacity:0;} 7% {opacity:1;} 14% {opacity:0;} 100% {opacity:0;} }

._3577a167 {

   opacity:0;
   animation-name:_a7af7bf0;
   animation-duration:3.5s;
   animation-iteration-count:infinite;
   animation-delay:1s;

}

._719fe403 {

   opacity:0;
   animation-name:_a7af7bf0;
   animation-duration:3.5s;
   animation-iteration-count:infinite;
   animation-delay:1.5s;

}

._8fab5a1b {

   opacity:0;
   animation-name:_a7af7bf0;
   animation-duration:3.5s;
   animation-iteration-count:infinite;

}

._9105806f {

   opacity:0;
   animation-name:_a7af7bf0;
   animation-duration:3.5s;
   animation-iteration-count:infinite;
   animation-delay:2.5s;

}

._a81484af {

   opacity:0;
   animation-name:_a7af7bf0;
   animation-duration:3.5s;
   animation-iteration-count:infinite;
   animation-delay:3s;

}

._b31d1bb5 {

   opacity:0;
   animation-name:_a7af7bf0;
   animation-duration:3.5s;
   animation-iteration-count:infinite;
   animation-delay:2s;

}

._c3f3c37c {

   opacity:0;
   animation-name:_a7af7bf0;
   animation-duration:3.5s;
   animation-iteration-count:infinite;
   animation-delay:0.5s;

}

Many thanks to all the wonderful people at Mozilla for everything you do!

첨부된 스크린샷