现象
对话界面里,底部悬浮的输入框底端到应用窗口底边框之间,会漏出对话文字——滚动对话内容经过输入框时,文字直接从输入框卡片下方露出来,看起来像"字从输入框底下漏出来"。
具体有两个漏字点:
- 输入框卡片底端到应用底边的 16px 地带(
pb-4 padding 区域)。这里是 transcript 滚动区的一部分但没有遮挡,内容滚动经过时会从输入框下方直接露出。
- 透过半透明输入框卡片本身。流式回复占满主线程时,输入框的测量高度会滞后于实际渲染高度,最后一条消息被变高的输入框盖住,文字透过毛玻璃表面显示出来。
截图
(现象特写,来自 #363 的 PR 正文)
影响
对话中最后一条消息的文字从输入框下方露出/透出,视觉上像是内容被半透明输入框"穿帮",阅读体验受影响。
修复
已由 #363 修复:在输入框卡片内部和卡片底端到应用底边之间各垫一块与聊天区同色的不透明背景遮罩(pointer-events-none),把漏字区域挡住。输入框视觉尺寸不变,只是底下不再透字。
现象
对话界面里,底部悬浮的输入框底端到应用窗口底边框之间,会漏出对话文字——滚动对话内容经过输入框时,文字直接从输入框卡片下方露出来,看起来像"字从输入框底下漏出来"。
具体有两个漏字点:
pb-4padding 区域)。这里是 transcript 滚动区的一部分但没有遮挡,内容滚动经过时会从输入框下方直接露出。截图
(现象特写,来自 #363 的 PR 正文)
影响
对话中最后一条消息的文字从输入框下方露出/透出,视觉上像是内容被半透明输入框"穿帮",阅读体验受影响。
修复
已由 #363 修复:在输入框卡片内部和卡片底端到应用底边之间各垫一块与聊天区同色的不透明背景遮罩(
pointer-events-none),把漏字区域挡住。输入框视觉尺寸不变,只是底下不再透字。