气泡方向错乱应禁用float/absolute，改用margin控制；小尾巴发虚需分层伪元素并设z-index；Vue消息跳变须用唯一key和排序计算属性；移动端滚动到底部需结合nextTick与降级方案。
气泡方向错乱：别用 float 或 absolute 定位
常见错误是给用户消息加 float: right，对方消息加 float: left，结果图片脱离文档流、时间戳错位、新消息不自动滚动到底部。根本原因是 float 会破坏正常流布局，position: absolute 更会让气泡脱离容器约束，响应式时直接重叠。
正确做法只用 margin 控制方向：
- 用户消息加
class="mine"，内部内容容器设margin-left: auto - 对方消息用
class="theirs"，保持默认左对齐，或显式加margin-right: auto - 所有气泡统一设
max-width: 80%，禁用width: 100%防止长文本撑爆视口
气泡“小尾巴”渲染发虚：伪元素 + 单边框必须分层
用 border-color: transparent #007aff transparent transparent 画右箭头看似简单，但 Safari 和部分安卓 WebView 里边缘常发虚、缩放后锯齿明显——问题出在没控制伪元素的堆叠顺序。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 左气泡尾巴用
::before，border-color: transparent #ff6a00 transparent transparent，配合left: -12px - 右气泡尾巴用
::after，border-color: transparent transparent transparent #007aff，配合right: -12px - 两个伪元素必须错开
z-index：::before { z-index: 1; }，::after { z-index: 2; }，确保背景色箭头压在边框箭头下方
Vue 场景下消息列表跳变：key 和排序不能偷懒
用 v-for 渲染消息时，如果只按数组索引 :key="index"，一发新消息就会触发整列重绘，滚动位置跳回顶部、时间戳格式错乱、动画中断——这不是 Vue 的 bug，是你没管好数据流。
必须做两件事：
- 用计算属性返回排序后消息：
computed: { sortedMessages() { return this.messages.sort((a, b) => a.timestamp - b.timestamp); } } -
:key必须绑定唯一字段，如:key="message.id"；禁用:key="index"，尤其在支持撤回、删除的场景下 - 时间戳格式化统一在 computed 或 template 中用
{{ message.time | formatTime }}，避免每条都调formatTime()函数影响性能
移动端滚动到底部失效：scrollIntoView 不是万能药
scrollIntoView({ behavior: 'smooth' }) 在 iOS Safari 上兼容性差，经常不触发或卡顿；更隐蔽的问题是：在 sendMessage 方法里直接调它，DOM 还没更新，目标元素根本不存在。
稳妥方案分三步：
- 聊天容器必须设固定高度：
max-height: 500px; overflow-y: auto;，否则scrollHeight计算不准 - Vue 中必须包
this.$nextTick()：this.$nextTick(() => { this.$refs.chatWindow.scrollTop = this.$refs.chatWindow.scrollHeight; }); - 降级处理：检测
scrollIntoView是否可用，不可用时手动算scrollTop值，基于clientHeight和最后一条消息的offsetTop
气泡样式本身不难，真正卡住人的永远是 DOM 更新时机、伪元素层级、移动端 scroll 行为这些隐性链路。稍一忽略，就是“看着像、用着崩”。
