我遇到了一个奇怪的问题，这似乎是由于使用百分比变换时像素舍入不良所致。
基本上，我有一个列结构，并且列内部的宽度等于列本身的 200%。然后，我想使用转换将列的内部切换到左侧，以显示其右侧，方法是使用 transform:translateX(-50%)
您可以看到简化的example here
但是，问题是，根据视口(viewport)的宽度(尝试调整框架大小)，某些列会显示 1 像素的空白。 Chrome、Safari 和 Firefox 中都会出现这种情况。
有人知道如何解决这个问题吗？
编辑:我知道我可以通过调整变换值或元素的宽度来“解决”问题，但这并不是很理想，我希望有一种正确的方法来解决它。
最佳答案
这是由于浏览器中的transform:translate属性计算错误造成的。通常通过将对象大小、填充或边距更改 1 或 2 个像素可以解决此问题。
尝试对具有变换属性的元素使用width: calc(200% + 2px);。
关于css - 列、变换和像素舍入问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45329005/