CSS滚动字幕（Ticker）失效求助：代码排查及修复

之前正常运行的CSS滚动字幕（从右向左循环滑动）突然失效，当前样式显示正常但无动画效果。使用的代码与之前完全一致，仅进行过WordPress及主题更新，已在多服务器、浏览器及旧版WordPress环境测试，均无法正常运行，请求协助排查原因并修复。

自定义HTML代码（WordPress自定义HTML块） #

<span class="sqb__ticker" data-title="&nbsp Speed" aria-hidden="true">Test</span>

原CSS代码 #

/* Text ticker BEGIN */
@keyframes ticker {
    from {
        transform: translate(0%, -50%);
    }
    to {
        transform: translate(-100%, -50%);
    }
}
.sqb__ticker,
.sqb__ticker::before,
.sqb__ticker::after {
    box-sizing: border-box;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
.sqb__ticker {
    font-size: 90vh;
    line-height: 1;
    position: absolute;
    top: calc(50% + 5vh);
    left: 0;
    transform: translateY(-50%);
    width: max-content;
    user-select: none;
    pointer-events: none;
    font-family: "system-ui";
    font-weight: 800;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 3px #3D5A80;
    opacity: 0.09;
}
@media only screen and (max-height: 800px) {
    .sqb__ticker {
        top: 50%;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .sqb__ticker {
        animation: ticker 120s linear infinite;
    }
}
.sqb__ticker::after {
    content: attr(data-title);
    display: inline-block;
    width: max-content;
    position: absolute;
    top: 0;
    left: 100%;
}
@media only screen and (max-width: 960px) {
    .sqb__ticker {
        display: none;
    }
}
/* Text ticker END */

排查方向与修复方案 #

可能原因

1. 动效偏好限制：动画仅在用户未开启「减少动效」时触发，部分浏览器/系统可能默认开启该选项，导致动画不执行。
2. 样式优先级冲突：WordPress主题更新后，新增的CSS规则覆盖了动画或transform属性。
3. 定位与溢出问题：父容器的overflow: hidden或未设置相对定位，导致绝对定位的字幕元素动画不可见。

修复步骤

1. 调整动效媒体查询（确保动画始终生效）
   将动画从prefers-reduced-motion: no-preference媒体查询中移出，同时保留对动效偏好的尊重：

   /* 替换原媒体查询块 */
   .sqb__ticker {
       animation: ticker 120s linear infinite;
   }
   /* 尊重用户减少动效的设置 */
   @media (prefers-reduced-motion: reduce) {
       .sqb__ticker {
           animation: none;
       }
   }
   

2. 强制动画优先级
   若主题样式覆盖了动画属性，添加!important提升优先级：

   .sqb__ticker {
       animation: ticker 120s linear infinite !important;
   }
   

3. 修复transform叠加冲突
   原元素已有transform: translateY(-50%)，关键帧中的translate会覆盖该属性，导致Y轴定位异常。修改关键帧仅控制X轴：

   @keyframes ticker {
       from {
           transform: translateY(-50%) translateX(0%);
       }
       to {
           transform: translateY(-50%) translateX(-100%);
       }
   }
   

4. 检查父容器设置
   确保字幕的直接父容器设置了position: relative，且未设置overflow: hidden：

   /* 给父元素添加该样式 */
   .sqb__ticker-parent {
       position: relative;
       overflow: visible;
   }
   

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