[Bug] Safari 浏览器上导航栏没有模糊效果

[Robotxm]

主题版本

v1.3.5

Bug 类型

该 Bug 是前端问题，但只在特定的浏览器上出现

浏览器

Safari

普遍性

是

问题描述

在 Safari 浏览器上，顶部导航栏没有模糊效果。

复现步骤

1. 应用 argon 主题
2. 在 Safari 浏览器中打开网站

截图

附加说明

Safari 浏览器中 backdrop-filter 属性需要 -webkit- 前缀，不知道是否和这个有关。

[crowya]

确实是这个问题，我用添加页尾脚本的方式解决了，覆盖了原先的函数。 以下代码已在手机/平板Safari浏览器亲测可行：

<!--根据滚动高度改变顶栏透明度--><script>
!function () {
    let toolbar = document.getElementById("navbar-main");
    let $bannerContainer = $("#banner_container");
    let $content = $("#content");
 
    let startTransitionHeight;
    let endTransitionHeight;
    let maxOpacity = 0.65;
 
    startTransitionHeight = $bannerContainer.offset().top - 75;
    endTransitionHeight = $content.offset().top - 75;
 
    $(window).resize(function () {
        startTransitionHeight = $bannerContainer.offset().top - 75;
        endTransitionHeight = $content.offset().top - 75;
    });
 
    function changeToolbarTransparency() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < startTransitionHeight) {
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
            toolbar.style.setProperty('box-shadow', 'none');
            toolbar.style.setProperty('-webkit-box-shadow', 'none');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(0px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(0px)');
            }
            toolbar.classList.add("navbar-ontop");
            return;
        }
        if (scrollTop > endTransitionHeight) {
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important');
            toolbar.style.setProperty('box-shadow', '');
            toolbar.style.setProperty('-webkit-box-shadow', '');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
            }
            toolbar.classList.remove("navbar-ontop");
            return;
        }
        let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity;
        toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
        toolbar.style.setProperty('box-shadow', '');
        if (argonConfig.toolbar_blur) {
            toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
            toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
        }
        toolbar.classList.remove("navbar-ontop");
    }
    changeToolbarTransparency();
    document.addEventListener("scroll", changeToolbarTransparency, { passive: true });
}();
</script>

虽然时间很久了，但如果有小伙伴需要的话~