Safari中:hover状态box-shadow导致background-color填充异常的修复方法

问题描述 #

带有padding的元素，为其:hover伪类同时设置background-color和box-shadow属性后，在Safari浏览器中，hover时的新背景色无法正确填充元素的padding区域；移除box-shadow属性后，背景色显示恢复正常。需在保留box-shadow的前提下解决该兼容问题。

代码示例 #

CSS代码 #

.btn,
a.btn{
    background-color: #027BFF;
    padding: 42px 20px;
}

.btn:hover, a.btn:hover {
    background-color: pink;
    box-shadow: 0 0 0 10px #888;
}

HTML代码 #

<a href="#" class="btn btn-primary" onclick="javascript: something()"><span>Search</span></a>

效果对比 #

• 异常效果（Safari hover状态）：
• 正常效果（移除box-shadow后hover状态）：

修复方案 #

该问题属于Safari的渲染bug，可通过以下几种方式修复：

方案1：添加background-clip: padding-box（推荐） #

明确指定背景色的填充范围为padding区域，强制Safari正确渲染：

.btn,
a.btn{
    background-color: #027BFF;
    padding: 42px 20px;
    background-clip: padding-box; /* 新增属性 */
}

.btn:hover, a.btn:hover {
    background-color: pink;
    box-shadow: 0 0 0 10px #888;
}

方案2：添加overflow: hidden #

通过裁剪超出元素盒模型的内容，修正渲染异常：

.btn,
a.btn{
    background-color: #027BFF;
    padding: 42px 20px;
    overflow: hidden; /* 新增属性 */
}

.btn:hover, a.btn:hover {
    background-color: pink;
    box-shadow: 0 0 0 10px #888;
}

方案3：添加空transform属性触发硬件加速 #

通过触发Safari的硬件渲染机制，修复bug：

.btn,
a.btn{
    background-color: #027BFF;
    padding: 42px 20px;
    transform: translateZ(0); /* 新增属性 */
}

.btn:hover, a.btn:hover {
    background-color: pink;
    box-shadow: 0 0 0 10px #888;
}

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