今天继续处理了字幕相关的一些 Bug,字幕的容器主要是使用了虚拟滚动库,相较以往会有一些新的问题。
上午发现在滚动条出现时,父容器会产生抖动的现象,遇到这种问题我首先怀疑的就是系统和浏览器的缩放,的确和这个有关系。因为在 125% 缩放的情况下可能浏览器内核计算宽度的像素点时就会存在小数点,但我还是继续换了个思路检查了下,最终发现其实是虚拟滚动库自身就会增加一个 overflow: auto
的属性,而它的父也存在一个这样的属性(之前没有虚拟滚动库,需要做滚动处理),删除之后就正常了。
以此同时还存在一个字符换行导致文字重叠的问题,一旦内容数量上去会导致容器出现滚动条(宽度发生变化),而虚拟滚动库并不能响应到变化,如果使用 overflow: visible
可能会有问题,此时可以直接用 CSS 的一种方式“强行占位”,保留滚动条空间而不影响实际视觉效果。
scrollbar-gutter: stable;