有人找到或知道针对悬停时使用 CSS 缩放进行转换的元素上出现的白线/边框的有效修复吗?
我尝试过以下方法:transform: translateZ(0)、-webkit-backface-visibility: hidden、 ,transform-style: preserve-3d但没有任何帮助。
在非视网膜显示器上可以清楚地看到这个错误。
这是为那些看不到该错误的人提供的视频,您会注意到图像底部有一条类似 1px 的线。
section {
padding: 100px 0;
}
figure {
margin: 0;
overflow: hidden;
}
figure:before {
position: absolute;
z-index: 2;
content: '';
width: 100%;
height: 100%;
background: rgba(43, 43, 54, 0.3);
transition: background 0.7s cubic-bezier(0.2, 1, 0.2, 1);
}
.ct-image-container {
display: flex;
position: relative;
transform: scale3d(1, 1, 1);
transition: transform 0.7s cubic-bezier(0.2, 1, 0.2, 1);
}
.ct-image-container img {
position: …Run Code Online (Sandbox Code Playgroud)