如何修复移动端CSS无限动画价格行情栏的卡顿异常问题

What's Breaking It #

1. Flex Container Shrinking: If .ticker-container uses display:flex, the .ticker element defaults to flex-shrink:1, forcing it to fit the container width instead of expanding to fit all crypto items. This cuts the animation short before all items are displayed.
2. Redundant Keyframes: Empty 0% and 100% blocks in the marquee animation conflict with from/to rules, causing mobile browsers to glitch.
3. Viewport Unit Compatibility: dvw isn’t fully supported on older mobile devices—stick to more reliable units like % or vw.

Fixes to Apply #

1. Prevent Ticker Shrinking #

If you need display:flex on .ticker-container, add flex-shrink:0 to .ticker to keep it at full width:

.ticker-container {
  overflow: hidden;
  background-color: #111113;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  color: #fff;
  padding: 6px;
  white-space: nowrap;
  display: flex; /* Keep this if you need flex layout */
}

.ticker {
  animation: marquee 20s linear infinite;
  width: max-content;
  flex-shrink: 0; /* Critical fix to retain full item width */
  will-change: transform; /* Optimizes animation performance on mobile */
}

2. Clean Up Animation Keyframes #

Delete the empty 0% and 100% blocks—they’re useless and cause conflicts:

@keyframes marquee {
  from {
    transform: translateX(100%); /* Start off-screen to the right */
  }
  to {
    transform: translateX(-100%); /* End off-screen to the left */
  }
}

For viewport-aligned start positions, swap 100% with 100vw (more widely supported than dvw).

3. Adjust Mobile Animation Speed #

Shorter duration on mobile keeps scroll speed consistent relative to screen size:

@media(max-width:998px) {
  .ticker {
    animation: marquee 15s linear infinite !important;
  }
  .ticker-item {
    margin-right: 10px !important;
  }
}

4. Confirm Inline Item Layout #

Ensure .ticker-item stays inline to keep all items in a single row:

.ticker-item {
  margin-right: 20px;
  background-color: #1a191f;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 14px;
  display: inline-block;
}

Full Working CSS #

.ticker-container {
  overflow: hidden;
  background-color: #111113;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  color: #fff;
  padding: 6px;
  white-space: nowrap;
  display: flex;
}

.ticker {
  animation: marquee 20s linear infinite;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
}

.ticker-item {
  margin-right: 20px;
  background-color: #1a191f;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 14px;
  display: inline-block;
}

.ticker-item:last-of-type {
  background-color: blue;
}

.ticker-item:first-of-type {
  background-color: red;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@media(max-width:998px) {
  .ticker {
    animation: marquee 15s linear infinite !important;
  }
  .ticker-item {
    margin-right: 10px !important;
  }
}

Why This Works #

• Flex Shrink Fix: flex-shrink:0 lets the ticker expand to fit all items, ensuring the animation scrolls the full list.
• Clean Keyframes: No conflicting rules mean mobile browsers render the animation correctly.
• Performance Boost: will-change:transform tells mobile browsers to optimize for smooth animation, reducing lag.

内容的提问来源于stack exchange，提问作者DaTZcodie