Pix主题前端Bug修复记录

前言

修复了几个PIX主题的前端BUG，本文章基于pix1.0.7版本，主题作者已经三年没更新了，被迫只能自己修修bug了......

Bug列表：

• 手机端滑动至底部时顶栏闪动问题
• 占位加载图不显示的问题

1.顶栏闪动问题

手机端滑动至底部临界时顶栏会闪动，原因：UIkit 判断已经到达 sticky 的“结束点（end）”，因此强制进入 uk-sticky-below 状态，并写入 position: absolute。

由于这一瞬间处于滚动极限和布局重排（footer 进入视口）的不稳定状态，UIkit 首次计算得到的 top 值出现偏差，从而形成明显的闪动。

解决办法一:使用css强制保持 position: fixed 等于绕过了这条 fixed→absolute 的边界计算路径，因此问题随之消失。

解决办法二:明确元素或父容器的高度。避免高度计算错乱。

快速解决

在主题设置中插入以下css即可解决。

.top_bar.uk-sticky-fixed {
    position: fixed !important;
    top: 0 !important;
}

2.占位加载图不显示问题

原css

img.lazy.loaded {
    opacity: 1;
    transition: opacity 400ms;
}

img.lazy:not(.loaded) {
    opacity: 0;
}

可以看出主题作者本意是实现图片的懒加载淡入效果，但现有写法存在一个问题：未加载的图片（img.lazy:not(.loaded)）被设置为完全透明，这会导致占位图在图片加载完成前也始终不可见。

所以只需要删除这两段css或者将透明度设置为1即可解决。

修复后

快速解决

在主题设置中插入以下css即可解决。

img.lazy:not(.loaded) {
    opacity: 1;
}

若想设置自定义加载图可以替换主题文件中img/lazyload.png，或者修改inc/pix-moment.php：615行

data-fancybox="post-images-'.$pid.'"URL .'/img/lazyload.png"

可修改路径替换为gif图（仅作用于片刻页面，其他页面可以自己找）