Safari中的CSS过渡背景图像跳转悬停答案

【问题标题】：CSS transition background-image jump hover in SafariSafari中的CSS过渡背景图像跳转悬停
【发布时间】：2018-01-20 22:25:09
【问题描述】：

我在 Safari 中遇到了过渡效果的问题，需要一些帮助。我的 CSS 悬停交换背景图像，因为它应该，但是悬停图像从它的位置向上和向左“跳跃”（我不想发生这种情况）。谢谢。

结构：

.sidebar .widget {
	height: 276px;
	width: 326px;
	background:url('/wp-content/themes/a-theme/svg/polygon-image.svg') no-repeat center center;
	background-size: 100%;
}

.sidebar .widget:hover {
	background:url('/wp-content/themes/a-theme/svg/polygon-image-hover.svg') no-repeat center center;
	background-size: 100%;
	transition: 0.5s ease-in-out;
}

<div class="sidebar">
	<aside id="black-studio-tinymce-18" class="widget widget_black_studio_tinymce">
		<div class="textwidget">
			<h3 style="text-align: center;">Sample Text<br></h3>
		</div>
	</aside>
</div>

【问题讨论】：

我可以看看你的图片吗？

标签： css safari transition

【解决方案1】：

避免浏览器错误并清理：

.sidebar .widget {
    height: 276px;
    width: 326px;
    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(/wp-content/themes/a-theme/svg/polygon-image.svg);
    background-size: 100%;
    transition:background-image 0.5s ease-in-out;
}
.sidebar .widget:hover {
    background-image:url(/wp-content/themes/a-theme/svg/polygon-image-hover.svg);
}

【讨论】：

【解决方案2】：

在您的帮助下，我修改了我的 CSS 以获得我所需要的。我有一个多边形的背景图像，中间有一个图形。我保留了图形并使用 CSS 多边形作为形状，现在我的悬停效果可以在 Firefox、Chrome 和 Safari 中使用。

请参阅下面的 CSS，再次感谢您的回复。

sidebar .widget {
	background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center;
	background-color: rgba(255, 165, 0, 0.85);
	background-size: 70%;
	-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	height: 276px;
	width: 326px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidebar .widget:hover {
	background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center;
	background-color: rgba(108, 218, 244, 0.8);
	background-size: 80%;
	-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	height: 276px;
	width: 326px;
	transition: 0.5s ease-in-out;
}

【讨论】：