chrome css background aliasing

时间:2017-05-17 11:23:29

标签: css google-chrome cross-browser

最近chrome改变了div背景的别名;这个变化发生在55到58之间,但还不能确定版本。

这是一个显示问题的片段(取决于浏览器oc):

div {
  width: 500px;
  height: 500px;
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: linear-gradient(to right, transparent calc(5%), rgba(80, 80, 80, 0.1) calc(5% + 1px), transparent calc(5% + 2px)), linear-gradient(to right, transparent calc(10%), rgba(80, 80, 80, 0.1) calc(10% + 1px), transparent calc(10% + 2px)), linear-gradient(to right, transparent calc(15%), rgba(80, 80, 80, 0.1) calc(15% + 1px), transparent calc(15% + 2px)), linear-gradient(to right, transparent calc(20%), rgba(80, 80, 80, 0.1) calc(20% + 1px), transparent calc(20% + 2px)), linear-gradient(to right, transparent calc(25%), rgba(80, 80, 80, 0.1) calc(25% + 1px), transparent calc(25% + 2px)), linear-gradient(to right, transparent calc(30%), rgba(80, 80, 80, 0.1) calc(30% + 1px), transparent calc(30% + 2px)), linear-gradient(to right, transparent calc(35%), rgba(80, 80, 80, 0.1) calc(35% + 1px), transparent calc(35% + 2px)), linear-gradient(to right, transparent calc(40%), rgba(80, 80, 80, 0.1) calc(40% + 1px), transparent calc(40% + 2px)), linear-gradient(to right, transparent calc(45%), rgba(80, 80, 80, 0.1) calc(45% + 1px), transparent calc(45% + 2px)), linear-gradient(to right, transparent calc(50%), rgba(80, 80, 80, 0.1) calc(50% + 1px), transparent calc(50% + 2px)), linear-gradient(to right, transparent calc(55%), rgba(80, 80, 80, 0.1) calc(55% + 1px), transparent calc(55% + 2px)), linear-gradient(to right, transparent calc(60%), rgba(80, 80, 80, 0.1) calc(60% + 1px), transparent calc(60% + 2px)), linear-gradient(to right, transparent calc(65%), rgba(80, 80, 80, 0.1) calc(65% + 1px), transparent calc(65% + 2px)), linear-gradient(to right, transparent calc(70%), rgba(80, 80, 80, 0.1) calc(70% + 1px), transparent calc(70% + 2px)), linear-gradient(to right, transparent calc(75%), rgba(80, 80, 80, 0.1) calc(75% + 1px), transparent calc(75% + 2px)), linear-gradient(to right, transparent calc(80%), rgba(80, 80, 80, 0.1) calc(80% + 1px), transparent calc(80% + 2px)), linear-gradient(to right, transparent calc(85%), rgba(80, 80, 80, 0.1) calc(85% + 1px), transparent calc(85% + 2px)), linear-gradient(to right, transparent calc(90%), rgba(80, 80, 80, 0.1) calc(90% + 1px), transparent calc(90% + 2px)), linear-gradient(to right, transparent calc(95%), rgba(80, 80, 80, 0.1) calc(95% + 1px), transparent calc(95% + 2px)), linear-gradient(to bottom, transparent calc(5%), rgba(80, 80, 80, 0.1) calc(5% + 1px), transparent calc(5% + 2px)), linear-gradient(to bottom, transparent calc(10%), rgba(80, 80, 80, 0.1) calc(10% + 1px), transparent calc(10% + 2px)), linear-gradient(to bottom, transparent calc(15%), rgba(80, 80, 80, 0.1) calc(15% + 1px), transparent calc(15% + 2px)), linear-gradient(to bottom, transparent calc(20%), rgba(80, 80, 80, 0.1) calc(20% + 1px), transparent calc(20% + 2px)), linear-gradient(to bottom, transparent calc(25%), rgba(80, 80, 80, 0.1) calc(25% + 1px), transparent calc(25% + 2px)), linear-gradient(to bottom, transparent calc(30%), rgba(80, 80, 80, 0.1) calc(30% + 1px), transparent calc(30% + 2px)), linear-gradient(to bottom, transparent calc(35%), rgba(80, 80, 80, 0.1) calc(35% + 1px), transparent calc(35% + 2px)), linear-gradient(to bottom, transparent calc(40%), rgba(80, 80, 80, 0.1) calc(40% + 1px), transparent calc(40% + 2px)), linear-gradient(to bottom, transparent calc(45%), rgba(80, 80, 80, 0.1) calc(45% + 1px), transparent calc(45% + 2px)), linear-gradient(to bottom, transparent calc(50%), rgba(80, 80, 80, 0.1) calc(50% + 1px), transparent calc(50% + 2px)), linear-gradient(to bottom, transparent calc(55%), rgba(80, 80, 80, 0.1) calc(55% + 1px), transparent calc(55% + 2px)), linear-gradient(to bottom, transparent calc(60%), rgba(80, 80, 80, 0.1) calc(60% + 1px), transparent calc(60% + 2px)), linear-gradient(to bottom, transparent calc(65%), rgba(80, 80, 80, 0.1) calc(65% + 1px), transparent calc(65% + 2px)), linear-gradient(to bottom, transparent calc(70%), rgba(80, 80, 80, 0.1) calc(70% + 1px), transparent calc(70% + 2px)), linear-gradient(to bottom, transparent calc(75%), rgba(80, 80, 80, 0.1) calc(75% + 1px), transparent calc(75% + 2px)), linear-gradient(to bottom, transparent calc(80%), rgba(80, 80, 80, 0.1) calc(80% + 1px), transparent calc(80% + 2px)), linear-gradient(to bottom, transparent calc(85%), rgba(80, 80, 80, 0.1) calc(85% + 1px), transparent calc(85% + 2px)), linear-gradient(to bottom, transparent calc(90%), rgba(80, 80, 80, 0.1) calc(90% + 1px), transparent calc(90% + 2px)), linear-gradient(to bottom, transparent calc(95%), rgba(80, 80, 80, 0.1) calc(95% + 1px), transparent calc(95% + 2px));
  z-index: 1;
}
<div>

</div>

这是如何在chrome 58上显示一个简单的网格: enter image description here

同样的css在Edge,IE11和Firefox上仍能正确呈现 enter image description here

是否有一种解决方法可以回到之前的渲染模式?

0 个答案:

没有答案