如何修复导航字体黑色描边/轮廓问题？

问题说明 #

页面头部默认背景透明，滚动时添加.sticky类固定在顶部并切换为白色背景；但滚动回顶部、背景恢复透明时，导航文本会出现黑色描边，需要保留背景切换效果的同时解决这个问题。

原代码 #

.header {
    position: absolute;
    top: 0;
    display: flex;
    z-index: 10;
    border-bottom: 1px solid @white;
    width: 100%;
    background-color: transparent;
    transition: background-color .3s ease-in-out, transform .3s ease-in-out;
    a {
        text-transform: capitalize;
        font-family: 'UniNeue-Regular', sans-serif;
        color: @white;
    }

    &.sticky{
        position: fixed;
        background-color: @white;
        transition: background-color .3s ease-in-out, transform .3s ease-in-out;
        border-bottom: 1px solid @black;
    }
}

解决方案 #

问题核心是文本颜色未与背景色同步过渡，导致浏览器渲染时出现异常描边。按以下方式修改：

1. 给导航文本添加颜色过渡效果，与背景色过渡时长保持一致，确保颜色切换和背景切换同步
2. 在.sticky类中明确设置导航文本为黑色，避免背景变白时文本不可见，同时保证过渡平滑

修改后的代码：

.header {
    position: absolute;
    top: 0;
    display: flex;
    z-index: 10;
    border-bottom: 1px solid @white;
    width: 100%;
    background-color: transparent;
    transition: background-color .3s ease-in-out, transform .3s ease-in-out;

    a {
        text-transform: capitalize;
        font-family: 'UniNeue-Regular', sans-serif;
        color: @white;
        // 添加颜色过渡，与背景过渡同步
        transition: color .3s ease-in-out;
    }

    &.sticky{
        position: fixed;
        background-color: @white;
        border-bottom: 1px solid @black;

        a {
            // 背景变白时，文本切换为黑色
            color: @black;
        }
    }
}

另外，检查全局样式中是否给文本设置了text-shadow或-webkit-text-stroke属性，这些也可能导致异常描边，如有需要针对性调整。

内容的提问来源于stack exchange，提问作者Julieta Ralph