[Bug]: 存在多个需要多次加载的 gallery 时，页面滚动将触发某些 gallery 中图片消失

[lrysia]

使用的 Butterfly 版本？ | What version of Butterfly are you using?

5.0.0

是否修改過主題文件？ | Has the theme files been modified?

否 (No)

使用的瀏覽器？ | What browser are you using?

Chrome

使用的系統？ | What operating system are you using?

Windows

依賴插件 | Package dependencies information

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

問題描述 | Describe the bug

背景

Hello，我可能发现了一个 gallery 标签的 Bug
我试图向一个 post 中写多个 gallery 标签，并在 gallery 的间隔写点文本，其 markdown 内容对应下图：

现象

我遇到的问题是某些 gallery 中会有 1-n 组图片，随页面滚动位置而突然消失/突然出现。
期间 f12 - console 没有报错，hexo g 也没有。
截图如下：

触发的条件

自行测试后，我觉得问题发生的条件应该是：
当且仅当有两个 gallery 先后出现，且这两个 gallery 中的图片个数都大于其单次加载个数时
第二个 gallery 中加载的每一组图片都会出现此问题（似乎除了最后一组）

触发情景举例

以 加载单位 = 10 为例：
第一个 gallery 中有 11 个图片， 第二个 gallery 中有 11个图片，第二个 gallery 的前 10 个图片会出问题
若第一个 gallery 或 第二个 gallery 中的图片数变成 10 个，那么就不再出现此问题

可能与这个问题有关的现象

我注意到，当有两组图片数为 11，加载单位为 10 的 gallery 时
页面上首先显示的是，gallery1 的前 10 个图片 和 gallery2 的前 10 个图片
然后才开始加载，gallery1 的第 11 个图片

出現問題的網站 | Website with the issue

非常抱歉我无法提供网址，因为我计划在本地将博客搭建好后再找服务器上线

[lrysia]

不太懂前端，我临时摸索了一点

我在 div class='gallery-items' 上打了 break on subtree modifications

然后触发这个 issue 的问题，截图如下：

看起来是 “根据视口位置、元素尺寸判断不可见元素并移除” 的过程出问题了？

[jerryc127]

我建议你上传上去 我可以查看

[lrysia]

我建议你上传上去 我可以查看

那可能要再过一段时间了。
不过我发现 egjs-infititegrid 的 issue 中，有人在2022年同样遇到了单页多组件的异常问题。
这个问题还没有关闭，其内容和我遇到的问题有相似之处。
链接：
naver/egjs-infinitegrid#491

[lrysia]

这个问题可能与以下 issue 相关

#1561

与这个问题有关的现象
当设置 useResizeObserver: true 时，
本 issue 的部分图片组随滚动消失问题不再出现，
但是会导致一部分图片组尺寸无限抖动，即上面 issue 的问题。

我的环境是 win11 chrome，屏幕分辨率 2560 * 1440，缩放 175%
上面的 issue 中，提出者认为与特定分辨率有关，我不清楚本问题的发生是否也和特定环境有关

另外我注意到，在本 issue 的问题出现后，
任意调整一下浏览器窗口大小，很大概率就可以让问题消失，
问题消失后，即便恢复到原来的窗口大小，问题也不会再次出现。

权宜之计

infiniteGrid 要面向大型瀑布流，所以要剔除视口外的元素，
而博客场景中 gallery item 的数量通常不会导致性能问题，
所以我已经使用 useRecycle: false 成功绕过了这个问题。
这样还顺便消除了读者快速上下翻动时，元素加载卡顿/不平滑的体验。

[lrysia]

我能够复现抖动问题，确实与特定的分辨率有关，但具体值似乎不固定，f12 来回拉尺寸有时就能碰到
抖动问题是 Debounce 造成的
resizeDebounce 设置的时间就是抖动问题出现时，抖动的时间间隔

[jerryc127]

方便把你这篇文章的 md 文件发给我么