MarleaM/OffBeets

Animations do not work on certain displays

開放

#2 建立於 2024年11月21日

 (0 則留言) (0 個反應) (0 位負責人)Python (1 個分叉)auto 404
CSSFrontendgood first issue

倉庫指標

星標
 (3 顆星)
PR 合併指標
 (PR 指標待抓取)

描述

Our current animations (sliding fade-in) work on a majority of displays, but on a select few, they do not load.

Gets Called By: SongRows.tsx File location: Anti-Spotify/frontend/src/App.css Code location: Lines 375. Sample is pasted below.

/* animation */

@keyframes song-fade-in-animation {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
    }
    100% { 
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
}

@keyframes navbar-fade-down-animation {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0px);
  }
}

.song-fade-in {
  animation: song-fade-in-animation linear;
  animation-timeline: view();
  animation-range-start: cover;
  animation-range-end: 400px;
}

.main-song-fade-in {
  animation: song-fade-in-animation .4s; 
}

.navbar-fade-down{
  animation: navbar-fade-down-animation .9s;
}

We have a suspicion that this may be due to the use of the methods called in .song-fade-in.

貢獻者指南