EveSunMaple / Frosti

A clean, elegant, and fast static blog template! 🚀 Developed with Astro
https://frosti.saroprock.com
GNU General Public License v3.0
200 stars 31 forks source link

深色模式下刷新/切换页面时的屏幕闪烁 #16

Closed L33Z22L11 closed 3 months ago

L33Z22L11 commented 3 months ago

在系统使用浅色、网站使用深色模式的情况下,刷新页面、切换路由时,屏幕会有短暂的白色闪烁。

另外,还有一个细节上的问题:在站内切换路由时,鼠标指针样式会在极短暂的时间内连续两次由手型光标切换到箭头光标,随后恢复手型光标。

EveSunMaple commented 3 months ago

感谢反馈!😊

第一个问题之前我只知道监听 astro:page-load 不知道还有 astro:after-swap ,所以刷新页面、切换路由时会慢一拍造成闪烁。我已经修改了代码,现在不管是否启用 astro:transitions ,页面刷新和跳转都不会闪烁了。

第二个问题我发现所有跳转的按钮都有此问题。我尝试了一番暂时还没解决(不清楚为什么)。

此次修改的内容:🛠️ Fix page transition flicker

此回复不是最终回复,因为还存在细节上的问题未解决。

再次感谢您的反馈!

L33Z22L11 commented 3 months ago

image

点击瞬间整个页面的 DOM 都会全部重载,随后出现 ::view-transition 元素。

EveSunMaple commented 3 months ago

我研究了一下,是 <ViewTransitions /> 路由器监听导致的,删除后就没有这个问题了

EveSunMaple commented 3 months ago

image

点击瞬间整个页面的 DOM 都会全部重载,随后出现 ::view-transition 元素。

这个是正常的。

下面是一个用 TailwindCSS + daisyUI + Astro 搭建的一个博客 https://astrofy-template.netlify.app/ ,也会出现相同的问题。不知道怎么解决呢……我倒是想通过监听 astro:... 来强制设置跳转时的鼠标样式,不知道可不可行。

EveSunMaple commented 3 months ago

抱歉👉👈我还是没能解决此问题😥这里添加一个标签,希望有大佬看到可以提一下建议

EveSunMaple commented 3 months ago

@L33Z22L11 很抱歉没能解决第二个问题

L33Z22L11 commented 3 months ago

既然其他 Astro 站点也有相同问题,可以问问 Astro 官方或者社区,也许能得到上游的帮助。

EveSunMaple commented 3 months ago

既然其他 Astro 站点也有相同问题,可以问问 Astro 官方或者社区,也许能得到上游的帮助。

这还真是一个普遍的问题,连 astropaper 都存在此问题。https://astro-paper.pages.dev/

我去 Astro 官方问问吧,也许可以得到一些帮助。

不管怎么说,还是要谢谢您提出此问题 ❤️

EveSunMaple commented 3 months ago

@L33Z22L11 我已经发布了一个 issue : https://github.com/withastro/astro/issues/11672

EveSunMaple commented 3 months ago

也许我应该把这个项目改为单页应用程序 (SPA)

而不是使用 astro:transitions

EveSunMaple commented 3 months ago

很开心,我相信我已经找到了真正的解决方案:https://swup.js.org/

现在在 dev 中运行良好,我想我再也不需要 astro:transitions 了,预计上午可以完成工作!

EveSunMaple commented 3 months ago

@L33Z22L11 此问题已修复,请查看 https://github.com/EveSunMaple/Frosti/releases/tag/v2.5.3

若还有问题,请留言 ❤️

EveSunMaple commented 3 months ago

此 issue 的衍生问题:https://github.com/EveSunMaple/Frosti/issues/20

当前状态:等待 PR 合并

EveSunMaple commented 3 months ago

有关于此 Issue 的衍生问题已解决,我将关闭它。

最后修订版本:https://github.com/EveSunMaple/Frosti/releases/tag/v2.5.4-hotfix.1

EveSunMaple commented 3 months ago

@L33Z22L11 我已经发布了一个 issue : withastro/astro#11672

我已经收到了回复。简单来说,这不是 Astro 的问题,而是 View Transition API 的问题。

L33Z22L11 commented 3 months ago

感谢持续跟进问题,我十分佩服你追根溯源最终解决问题的内驱力,祝愿你在开发之路上一切顺利 :)

EveSunMaple commented 3 months ago

感谢持续跟进问题,我十分佩服你追根溯源最终解决问题的内驱力,祝愿你在开发之路上一切顺利 :)

对自己的项目负责 ✨