列，轉換和像素舍入問題

我遇到了一個奇怪的問題，這似乎是由於在使用百分比轉換時出現壞像素舍入。列，轉換和像素舍入問題

基本上，我有一個列結構，並且列內部的寬度等於列本身的200％。我想，然後使用轉換來切換柱內的左側，以顯示它的右側，使用transform: translateX(-50%)

你可以看到但是簡化example here

的問題是，根據在視口的寬度上（嘗試調整幀的大小），一些列會顯示1像素的空白。這發生在Chrome，Safari和Firefox中。

有沒有人有任何想法如何解決這個問題？

編輯：我知道我可以通過調整變換值或項目的寬度來「修復」問題，但這不是很理想，我希望有一個合適的方法來修復它。

2017-07-26 Leon

這是因爲造成的變換：在瀏覽器中轉化性能誤判。通常通過更改對象大小，填充或邊距1或2像素可以修復此問題。

嘗試使用width: calc(200% + 2px);作爲具有變換屬性的元素。

2017-07-26 14:05:54

是的，我正在玩這個，但希望能有一個「真正的」（非哈克）解決方案..謝謝你的建議。 – Leon

不會有「非hacky」解決方案，它總是由大約1px引起的，您必須在某處添加或刪除它。如果是寬度，填充或邊距則無關緊要。 –

這很糟糕。那麼我會去解決這個問題。謝謝！ – Leon

transform: translateX(-49%);似乎解決它

2017-07-26 13:59:31

是的，雖然這不是我想要的。在實際的例子中，項目必須與其他項目完全對齊，所以它需要完全是50％。 – Leon

因爲1px是問題，'translateX（50％+ 1px）' –

回答