易翻译输入中文时候选框挡住聊天框，怎样记录和排查？

出现易翻译中文输入候选框遮挡聊天框时，应立即记录复现步骤、设备与系统信息、浏览器或客户端版本、键盘输入法设置与截图/录屏；然后在不同场景复现并收集日志，以便定位是输入法、渲染层、样式冲突或前端事件处理问题。优先按重现率与影响排序处理。。

易翻译：记录和收集复现信息

操作：立刻记录完整复现步骤与环境信息

• 核心信息：记录复现步骤要逐步展开，包括触发输入的确切按键、输入法候选框出现时间点、所处聊天框位置、是否横竖屏切换、以及是否存在滚动或弹窗等干扰因素，确保可被他人复现。
• 设备与系统：保存设备型号、操作系统版本、系统语言设置、显示缩放比例和分辨率等信息，输入法版本和系统补丁等级也要一并记录，有助于判断是否为平台特异性问题。
• 客户端版本：标注浏览器或易翻译客户端版本号、内核版本以及是否开启兼容模式或插件，必要时导出 About 信息或安装包信息以便对照分析。

相关问题可继续阅读：下载安装完成后没有桌面图标，怎样找到启动入口？。

操作：采集视觉证据（截图与录屏）

• 截图要点：在不同状态下截取完整屏幕和局部视图，标注候选框与聊天框的相对位置以及出现时间点，保存为带时间戳的图片方便排序和对比。
• 录屏设置：录屏建议包含触发前后全过程，开启系统指针和触控显示，分辨率与帧率中等以上以保留滑动与动画细节，录制时附带语音或文字说明更利于沟通。
• 分阶段捕捉：分别录制初次出现、滚动页面、切换输入法或焦点转移等关键场景，保证每种可能导致遮挡的交互都有对应视觉证据。

易翻译：前端调试与日志收集

操作：启用浏览器开发者工具收集控制台与网络日志

• 控制台日志：在复现问题前打开 DevTools 控制台，保持记录并导出日志，关注报错、样式重算、重排（reflow）提示和与输入法相关的事件输出，以便排除 JS 异常干扰。
• 网络请求：记录网络请求时间线与资源加载情况，尤其是延迟加载或动态插入样式导致的渲染差异，导出 HAR 文件用于分析资源加载与异步执行对渲染的影响。
• 性能追踪：使用 Performance 或 Timeline 捕获帧率和合成层信息，定位是否存在长任务或渲染阻塞导致候选框定位计算不准确或延迟更新。

操作：在原生或移动端收集系统与内核日志

• Android 日志：使用 adb logcat 记录系统输入法、WindowManager、SurfaceFlinger 和应用进程输出，筛查与键盘、窗口层次或 Overlay 相关的报错与警告。
• iOS 日志：通过 Xcode Console 或设备控制台导出日志，关注输入法候选框的调用链、键盘通知（如 keyboardWillShow/DidShow）以及安全区域（safe area）与约束变化信息。
• 客户端崩溃与 UMA：收集崩溃堆栈与指标埋点信息，核对是否在候选框出现时触发异常或重绘失败，确保可以关联到特定代码路径或用户操作序列。

易翻译：定位问题根源的排查方法

操作：排查输入法与应用之间的交互问题

• 检测输入法类型：尝试切换不同系统或第三方输入法，比较候选框行为差异，若问题只在特定输入法出现则优先定位输入法渲染或候选框浮层实现的兼容性问题。
• 聚焦与光标处理：验证在输入框获得或失去焦点时是否有不当的布局重算或滚动处理，检查光标位置与 selection、composition 事件对 UI 的影响。
• 组合事件检查：关注 compositionstart、compositionupdate、compositionend 等事件触发顺序，确认输入法组合文本处理是否被前端截断或干预导致候选框位置异常。

操作：检查样式层与定位（z-index、position、transform）问题

• 固定与绝对定位：核验聊天框和候选框的 CSS 属性，特别是 position、top/left、transform、will-change 等，transform 或 3D 造成新层级可能改变层叠上下文。
• z-index 冲突：检查页面上所有具有 position 属性的容器和弹窗，确认 z-index 值是否被覆盖或层叠语义被破坏，尝试临时提升候选框或聊天框 z-index 验证影响。
• overflow 与 clipping：确认父容器是否有 overflow:hidden、mask 或 clip-path，若候选框被父容器裁剪则需要调整结构或使用 portal 技术将候选框渲染到顶层容器。

相关问题可继续阅读：在电脑休眠恢复后不再更新消息，怎样区分连接与显示问题？。

易翻译：复现场景与对比验证步骤

操作：在多设备、多分辨率下复现对比

• 不同设备测试：在桌面、平板、手机等设备上分别复现问题，记录是否与屏幕尺寸、系统输入法或键盘高度相关，并比较横竖屏以及不同缩放比例下的差异。
• 模拟不同网络与性能：在慢速网络或受限 CPU 环境下重现，判断是否为性能问题导致渲染延迟或候选框位置计算时机不对而产生重叠或遮挡。
• 与低权限或隐私模式对比：在隐私模式、无插件或禁用扩展的情况下复现，排除浏览器扩展或安全策略对输入框或浮层行为的干预。

操作：使用隔离最小化测试定位因素

• 最小复现页面：创建最简 HTML 页面只包含一个输入框和聊天框，逐步添加样式和脚本以还原问题，定位是哪一段样式或脚本引入后问题出现。
• 禁用脚本策略：通过禁用特定 JS 模块或功能开关（如虚拟键盘适配、滚动监听、自动滚动到光标）来确认是否由业务逻辑导致候选框位置错位。
• 逐步恢复检查：在最小复现页中逐项恢复被禁用功能，同时记录每一步的差异，以便精确定位触发问题的代码或样式片段。

易翻译：修复建议与临时规避方案

操作：前端调整以保证候选框与聊天框互不遮挡

• 使用 Portal 渲染：将输入候选框渲染到应用顶层（如 body 或指定 root），避免被父容器的 transform 或 overflow 裁剪，从根本上解决层级与裁剪问题。
• 动态计算位置：在 composition 事件或键盘显示回调中动态计算候选框位置，考虑键盘高度、safe-area 与聊天框位置，使用 requestAnimationFrame 以保证视觉同步。
• 调整 z-index 策略：为候选框与聊天框定义明确的 z-index 层级规则，并在不同交互场景中通过样式类切换确保候选框优先显示或聊天框自动上移避免遮挡。

操作：临时兼容性处理与回滚策略

• 临时样式修补：在无法快速修改输入法的情况下，通过前端注入临时 CSS（例如增加聊天框 margin-bottom 或在输入激活时应用 translateY 位移）缓解遮挡影响。
• 功能回退：如新引入的适配代码导致回归，可快速回滚到稳定版本并标注回归原因，同时在回滚版本中加入更详细的日志以便后续定位。
• 与输入法厂商沟通：若定位到是第三方输入法行为异常，应将复现包、录屏与日志提交给输入法方，通过厂商合作修复或建议用户使用替代输入法作为临时方案。