旋转的div在Chrome和Firefox中的渲染方式不同

Question

我在Firefox和Chrome的渲染方面存在以下差异

* {
	box-sizing: border-box;
}

.arrow-container {
	padding: 35px 15px;
	width: 60px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.3);
}

.arrow {
	position: relative;
	width: 30px;
	height: 30px;
}

.arrow::before,
.arrow::after {
	content: '';
	display: block;
	position: absolute;
	right: 2px;
	width: 30px;
	height: 3px;
	background-color: #ffffff;
	box-shadow: 0 0 1px 0 #ffffff,
		0 0 1px 0 #ffffff,
		0 0 1px 0 #ffffff,
		0 0 1px 0 #ffffff;
}

.arrow::before {
	top: 50%;
	transform-origin: 100% 0;
	transform: rotate(45deg);
}

.arrow::after {
	bottom: 50%;
	transform-origin: 100% 100%;
	transform: rotate(-45deg);
}

<div class="arrow-container">
	<div class="arrow"></div>
</div>

我想知道是否有办法克服这种差异？为了记录，删除box-shadow并不能解决问题。

Answer 1

使用height的偶数值（因为Chrome计算像素的小数值，而Firefox不计算）和更简单的box-shadow，结果会更准确。

* {
	box-sizing: border-box;
}

.arrow-container {
	padding: 35px 15px;
	width: 60px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.3);
}

.arrow {
	position: relative;
	width: 30px;
	height: 30px;
}

.arrow::before,
.arrow::after {
	content: '';
	display: block;
	position: absolute;
	right: 2px;
	width: 30px;
	height: 4px;
	background-color: #ffffff;
	box-shadow: 0 0 1px 0 #ffffff;
}

.arrow::before {
	top: 50%;
	transform-origin: 100% 0;
	transform: rotate(45deg);
}

.arrow::after {
	bottom: 50%;
	transform-origin: 100% 100%;
	transform: rotate(-45deg);
}

<div class="arrow-container">
	<div class="arrow"></div>
</div>