直播间商品卡不能用 article 作外层容器，因其本质是时间锚点快照，无独立 url 和 seo 需求；应改用 div + role="region" + aria-label 保障可访问性与性能。
直播间商品卡不是普通商品卡片的简单复刻，它必须解决「视频时间轴联动」「弹出时机精准控制」「弱网下内容降级」三个硬性问题。直接套用常规 article + flex 布局会在线上直播场景中频繁失焦、错位、白屏。
为什么直播间商品卡不能直接用 article 做外层容器
常规电商页用 article 是因为每张卡代表独立可索引内容；但直播间商品卡本质是「时间锚点快照」——它没有独立 URL、不参与 SEO、生命周期随视频片段动态创建/销毁。强行套 article 会导致：
- 屏幕阅读器误读为独立文章，干扰主播语音流
- React/Vue 中 key 失效（因 DOM 频繁增删，
article的语义约束反而限制 diff 策略） - 部分安卓 WebView 对动态插入
article的渲染延迟明显（实测平均多 120ms）
更稳妥做法：用 div + role="region" + aria-label="商品：iPhone 15 Pro，讲解时间点 02:18"，既保留可访问性，又绕过语义绑定带来的性能拖累。
position: fixed 弹窗卡在滚动时错位的根本原因
直播间页面常含「评论浮层+点赞动效+进度条」三层叠加滚动，若商品卡用 position: fixed，其定位基准是 viewport，而非实际滚动容器（比如 div#live-chat-container）。结果就是用户向上滑动评论区时，商品卡还钉在原屏幕位置，视觉完全脱节。
正确解法是放弃 fixed，改用：
- 父容器设
position: relative（即真实滚动区域） - 商品卡用
position: absolute，并通过getBoundingClientRect()动态计算top值 - 监听
scroll时用requestAnimationFrame更新位置，避免 layout thrashing
注意：iOS Safari 对 absolute 元素在 overflow: auto 区域内的重绘有缓存 bug，需强制加 transform: translateZ(0) 触发硬件加速。
图片加载失败时如何避免卡片高度塌陷
直播间商品图常走 CDN 分片加载（如 https://cdn.example.com/product-123-400w.jpg），网络抖动时 img 可能触发 error 事件但未设置 fallback，导致卡片高度归零、下方商品被顶飞。
防御式写法必须包含三重保障：
-
img标签自带width和height属性（非 CSS），防止 FOUC - CSS 中设
aspect-ratio: 1 / 1，并配min-height: 120px（防极端缩放） - JS 监听
img.onerror后，立即插入占位 SVG：<svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="#f5f5f5"></rect><text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">暂无图</text></svg>
切记不要用 background-image 替代 img——直播页需支持长按保存图片，background 无法触发原生菜单。
价格和库存数字跳变时的视觉干扰怎么消除
直播间秒杀场景下，textContent 直接替换价格文本会造成文字重排（尤其 iOS 上字体渲染引擎对数字宽度变化敏感），出现「数字左右晃动」现象，分散用户注意力。
稳定方案是把数字拆成单个字符包裹进 span：
<div class="price"> <span>¥</span> <span>3</span> <span>9</span> <span>9</span> </div>
再配合 CSS：
.price span { display: inline-block; width: 1.2em; text-align: center; }- 更新时只替换
span的textContent，不操作父节点 - 加
transition: transform 0.1s ease，用scale(1.05)→scale(1)模拟轻弹反馈
这个细节在 60fps 直播流里极难察觉，但用户潜意识会觉得「信息更稳」——真正复杂的不是实现，而是意识到数字宽度本身也是 UI 变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
