垂直时间线移动端错位因flex/grid未配视口断点，需用min-height:100vh、overflow-x:hidden及@media切换padding；滚动追踪应改用IntersectionObserver；IE11需-ms-flex前缀、禁用gap和SVG箭头；嵌套缩放时须重置transform并避免zoom。
垂直时间线在移动端错位或折叠
垂直方向的时间线在小屏上常出现节点重叠、文字换行错乱、箭头断裂等问题，根本原因是 CSS 的 flex-direction: column 或 grid 布局未配合视口单位做断点约束。
- 用
min-height: 100vh替代固定高度，避免内容截断 - 时间轴主容器加
overflow-x: hidden，防横向滚动条意外触发 - 每个时间点项（
.timeline-item）必须设width: 100%，否则 Flex 子项在 iOS Safari 中可能收缩异常 - 移动端优先写
@media (max-width: 768px)，把padding-left改为padding-top，让文字从节点下方展开而非右侧——这是最常被忽略的对齐逻辑切换点
进度指示器无法随滚动实时更新
所谓“追踪轴”，核心是当前步骤高亮需匹配滚动位置，但直接监听 window.onscroll 容易卡顿且不准，尤其在 Safari 中 scroll event 触发频率低、节流后偏差更大。
- 改用
IntersectionObserver监听每个.timeline-step元素的可见比例，阈值设为0.2更稳妥（避免仅顶部 1px 进入就触发） - 不要依赖
offsetTop计算滚动百分比——它不包含 transform 偏移和 sticky 定位影响 - 高亮状态建议用 class 切换（如
is-active），而非内联 style，否则 SSR 渲染时样式丢失 - 若时间轴嵌在
position: sticky容器里，需额外监听容器滚动而非 window，否则 observer 回调不触发
IE11 下垂直时间线完全错乱
IE11 对 flex 的 align-items 和 gap 支持极差，且不识别 IntersectionObserver，但业务仍需兼容时，不能全量降级为 float 布局。
- 用
display: -ms-flexbox+-ms-flex-direction: column补充前缀，别省略-ms- - 放弃
gap，改用margin-bottom控制节点间距，并给最后一项margin-bottom: 0 - IE11 下禁用滚动追踪，只保留静态高亮（比如靠 URL hash 或初始数据判断当前 step）
- 箭头用伪元素
::before绘制，别用 SVG —— IE11 对 inline SVG 的viewBox解析不稳定
多层级嵌套时时间轴缩放失真
当时间线作为组件嵌入卡片、模态框或 Tabs 页签中，父级设置了 transform: scale(0.95) 或 zoom，会导致子元素定位偏移、伪元素尺寸错乱，尤其是带 position: absolute 的连接线。
立即学习“前端免费学习笔记（深入）”；
- 所有绝对定位的轴线（如
.timeline-line）必须加transform: none !important覆盖父级缩放 - 避免对整个时间线容器使用
zoom，改用transform: scale()并配transform-origin: 0 0，否则计算坐标时基准偏移 - 如果父级用了
will-change: transform，时间线内部动画会失效，删掉或仅作用于动画元素本身 - 连接线高度用
calc(100% - 24px)这类动态值时，IE/Edge Legacy 会解析失败，得用 JS 动态设置height内联样式
垂直时间线最难的不是画出形状，而是让「滚动感知」和「缩放容错」同时成立——这两处一旦出问题，调试时往往要倒查三层 DOM 结构和两层 CSS 上下文，比写新功能还耗神。
