CSS3奇怪的渲染行为

Question

当用户悬停在列上时，不同的resoliutions上出现1px行。它发生在IE11（悬停），Edge（悬停），Firefox（在列之间悬停时闪烁）和Chrome（中心）浏览器以及其他浏览器上。源代码如下图所示。提前谢谢。

＆＃13;

＆＃13;

/* reset css*/
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

.section{
	display:flex;
	flex-flow:row nowrap;
  	justify-content:center;
}

.section .column{
	width:25%;
	overflow:hidden;
	position:relative;
}

.section .wrapper{
	width:100%;
	height:50%;
	padding:12.5% 7.5% 0 7.5%;
	box-sizing:border-box;
	background:rgba(0,0,0,0.4);
  	cursor:pointer;
  	position:absolute;
  	bottom:0;
  	left:0;
  	right:0;
}

.section .bg{
  	width:100%;
	height:100vh;
	transition:all 2s ease;
	backface-visibility: hidden;
	background:url(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/iPhone6_With_iPad_PSD_template.png) center center/cover no-repeat;
}

.section .column:hover .bg{
	transform:scale3d(1.3,1.3,1.3);
}

＆＃13;

<div class="section">
	<div class="column">
		<div class="bg"></div>
		<div class="wrapper">Some text</div>
	</div>
	<div class="column">
		<div class="bg"></div>
		<div class="wrapper">Some text</div>
	</div>
	<div class="column">
		<div class="bg"></div>
		<div class="wrapper">Some text</div>
	</div>
	<div class="column">
		<div class="bg"></div>
		<div class="wrapper">Some text</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

On Chrome 57.0.2987.133

On Microsoft Edge 38.14393.1066.0

Answer 1

从我所看到的，问题看起来是隐藏的背面可见性。我能够在Chrome中重现您的问题，并删除背面可见性：隐藏修复它。

.section .bg{
    ...
    backface-visibility: hidden;
    ...
}

Answer 2

添加额外的包装器<div class="container">并更改为显示表似乎是所有浏览器上的固定问题。

/* reset css*/
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

.section{
	width:100%;
	display:table;
}

.section .column{
	width:25%;
	height:100vh;
	display:table-cell;
}

.section .container{
	width:100%;
    height:100%;
	overflow:hidden;
	position:relative;
}

.section .wrapper{
	width:100%;
	height:50%;
	padding:12.5% 7.5% 0 7.5%;
	box-sizing:border-box;
	background:rgba(0,0,0,0.4);
    cursor:pointer;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

.section .bg{
	position:absolute;
    width:101%; /*firefox fix*/
    height:100%;
    transition:all 2s ease;
    z-index:-1;
    background:url(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/iPhone6_With_iPad_PSD_template.png) center center/cover no-repeat;
}

.section .column:hover .bg{
	transform:scale3d(1.3,1.3,1.3);
}

<div class="section">
	<div class="column">
		<div class="container">
			<div class="bg"></div>
			<div class="wrapper">Some text</div>
		</div>
	</div>
	<div class="column">
		<div class="container">
			<div class="bg"></div>
			<div class="wrapper">Some text</div>
		</div>
	</div>
	<div class="column">
		<div class="container">
			<div class="bg"></div>
			<div class="wrapper">Some text</div>
		</div>
	</div>
	<div class="column">
		<div class="container">
			<div class="bg"></div>
			<div class="wrapper">Some text</div>
		</div>
	</div>
</div>