【BUG？】夜间模式下 转发动态 文本输入框高度会不断增加

[rainpenber]

关于哪一项功能

夜间模式

问题描述

在动态页面开启深色模式，点开动态转发按钮，按键会使得输入框高度会不断增加（无论是输入内容还是删除内容）
逐个开启关闭功能，发现开启了夜间模式的时候该bug会出现 关闭夜间模式则不会出现

脚本版本

v2.0.6-preview-2-ga13ef02f2

浏览器版本

Chrome 96.0.4664.45

播放器版本

No response

是否开启 HEVC

No response

错误信息

未找到对应错误信息

附加截图

[the1812]

上古级神秘 bug, 我也不知道啥原因

[timongh]

经过艰苦的 debug 工作和折半查找（指删一半代码），找到出错的地方了。

相关文件及代码

1. 开启组件的情况下，在转发编辑栏的 <textarea> 标签上选中中断于“属性修改”，然后在编辑栏输入字符，就能立刻中断到 B 站的相关代码。

   var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 180 // t 就是 180，编辑栏最大高度
       , e = this.$refs.textarea  // 编辑栏的 textarea 元素
       , i = 40 // 一个常量
       , n = 0;
   this.$nextTick((function() {
       // 将编辑栏 height 重置为 40
       e.style.cssText += "height: ".concat(i, "px;");
       // 通过 e.scrollHeight 获取内容的实际高度，如果在 180 以内，n = e.scrollHeight，否则 n = 180
       // 注：编辑栏的初始高度是 45，因此 e.scrollHeight > i 始终成立
       var o = (n = e.scrollHeight > i ? t > e.scrollHeight ? e.scrollHeight : t : 25) >= t ? "auto" : "hidden";
       // 设置元素的 height = n
       e.style.cssText += "height: ".concat(n, "px; overflow: ").concat(o, ";")
   }
   ))

2. 脚本的关键代码在 ./Bilibili-Evolved/registry/lib/components/style/dark-mode/old/dark-slice-6.css 的 957 行。

   .textarea {
     transition: all 0.2s;
   }

现象描述

这里有两个变量影响了其代码的实际行为：

1. 是否开脚本，具体来说是脚本中的上述样式是否开启。
2. 是否处于 debug 模式。更具体的说，是断点有没有打在上面匿名函数中的那 3 行代码上（打在三行中的任意一行都一样）。

结果如下：

变量1	变量2	结果
是	是	正常
是	否	异常
否	是	正常
否	否	正常

原因分析

在继续之前，需要提及一点，通常情况下，这个编辑栏的 scrollHeight 会一直比 height 大 5px。其原因我不清楚。

另外，下文中第一、二、三行代码指的是上述 B 站相关代码中，匿名函数内的三行代码。

程序预期的执行情况：

异常时，我猜测的运行情况：

在这种情况下，编辑框的 height 平白增加了 5px。而在 debug 时，有足够的时间留给浏览器渲染动画，因此代码按预期执行，符合上面的总结的现象。

当然这只是我的猜测。因为这其中可能涉及动画、异步、浏览器执行顺序等等。这些我其实都不怎么了解，不排除我的分析与实际情况大相径庭的可能。有能力的朋友请自行分析情况，我的猜测不可尽信。

解决方法

最直接的方法就是删掉那个动画属性。

要完美实现动画，或许只能重写这部分代码，并用 B 站的 API 来提交了。

其他解决方案目前我还想不到。

[timongh]

关于 scrollHeight 的高度比 height 多 5px 应该是因为它包括了 padding。没仔细研究过这个的计算方式。

另外上面的流程图也是有漏洞的，有些现象它解释不了，比如：

如果将断点设在第三行上，那么根据流程图，scrollHeight 应该是 50 这个错误值，因为获取该值时动画应该没完成，但实际上，在控制台看到的值却是 45。这一点就是上述模型无法解释的。

因此，我需要重申：我没有相关方面的知识。上述模型都是我的猜测，而且它无法完美解释问题里的现象，因此它极有可能是错误的。请务必不要将我的猜测视作事实。