Search code examples
google-chromewebkitleaflettranslate3d

'translate3d' strange rendering on chome /makes fonts look different

I'm having a leaflet map which uses -webkit-transform: translate3d. 

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

Let's say we have the above code and foo is located over the map. foo and all items over the map (and its margins) are somewhat losing their original view. For example the text becomes slightly different. If there is a div with a border over map the left border might sometimes (!?) be lost.

This bug is generated on my OS X chrome. Safari seems to render it fine.

Solution

  • I added -webkit-font-smoothing: antialiased; on the html tag and now seems to have been solved.