chrome 上的“translate3d”奇怪渲染/使字体看起来不同

Question

我有一张使用-webkit-transform: translate3d 的传单地图。

<div id="map"></div>
<div id="foo">some text</div>

假设我们有上面的代码，foo 位于map 之上。 foo 和map 上的所有项目（及其边距）都在某种程度上失去了原来的视图。例如，文本变得略有不同。如果有一个边框超过map 的 div，则左边框有时 (!?) 可能会丢失。

这个错误是在我的 OS X chrome 上产生的。 Safari 似乎可以很好地渲染它。

Answer 1

我在html标签上加了-webkit-font-smoothing: antialiased;，现在好像已经解决了。