根本原因是被HTML5废弃，属浏览器兼容性残留；Chrome部分支持，Firefox默认禁用，Safari完全忽略，应改用CSS @keyframes + transform: translateX() 实现硬件加速滚动动画。
滚动文字在 Chrome/Firefox/Safari 中表现不一致的根本原因
不是“滚动文字本身有问题”，而是 标签早已被 HTML5 废弃，现代浏览器对其支持纯属兼容性残留——Chrome 仍部分解析，Firefox 默认禁用（需手动启用 layout.css.devPixelsPerPx 才可见效果），Safari 则完全忽略。所有视觉差异都源于此：你根本没在用标准方案。
用 CSS @keyframes + animation 替代
必须放弃语义化幻觉，改用可控的 CSS 动画。关键点在于：用 transform: translateX() 而非 left 或 margin-left，保证硬件加速且帧率稳定。
@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
.scrolling-text {
white-space: nowrap;
animation: scroll-left 10s linear infinite;
/* 必须设 width，否则 Safari 可能不触发动画 */
width: fit-content;
display: inline-block;
}- 动画时长（
10s）需根据内容长度动态调整：文字越长，值应越大，否则会“跳帧” - Firefox 需显式加
will-change: transform;防止偶发卡顿 - Safari 15.4+ 对
fit-content支持不稳定，可退回到固定width: max-content;或 JS 测量后注入
遇到 overflow: hidden 截断、首尾衔接露白等常见问题怎么调
纯 CSS 滚动本质是“把文字拉出容器再拉回”，截断和露白都是位移计算没对齐导致的。不要靠猜，用 DevTools 实时调 transform 值定位。
- 首尾衔接露白：把
to的位移值从-100%改为-100vw（或更精确地用 JS 计算文字总宽） - 容器右侧突然截断：确保父容器有
overflow: hidden;，且子元素未设display: block;（会换行破坏单行滚动） - Chrome 滚动变慢/卡顿：检查是否同时启用了
scroll-behavior: smooth;，它会干扰animation的合成层
需要支持 IE11？别用 CSS 动画，改用 requestAnimationFrame + scrollLeft
IE11 不支持 @keyframes 在内联元素上的应用，且 transform 动画性能极差。此时必须降级为 JS 驱动，但要注意：不能用 setInterval，必须用 requestAnimationFrame 保帧率。
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.scrolling-text');
let pos = el.scrollWidth;
function scroll() {
el.scrollLeft = pos--;
if (pos < -el.scrollWidth) pos = el.scrollWidth;
requestAnimationFrame(scroll);
}
scroll();- 必须监听
resize事件重置pos，否则窗口缩放后错位 - 移动端 Safari 对
scrollLeft有延迟，需加el.style.webkitOverflowScrolling = 'touch'; - 该方案在 iOS 16+ 上可能触发
scroll事件抖动，建议加节流
实际项目里最常被忽略的，是滚动区域的容器高度——如果父容器 height 为 auto 且文字含 line-height，不同浏览器对基线对齐的处理会导致垂直偏移不一致。动手前先用 border: 1px solid red 包住容器看真实占位。
