Google地图标记仅在iPhone/iPad上以特定缩放级别消失

Question

我现在真的陷入了使用Google Maps API V3的一个非常奇怪的问题.

我在iframe中有一个地图,显示了很多标记,每个点击都有一些自定义信息框,这里:

http://www.whist.ch/karte

我在Mac和PC(Chrome,Firefox,IE)上测试过的所有浏览器都能正常运行.然而,在iPad和iPhone上,当放大得太近时标记消失,在缩小时再次出现.

有没有人对此有解释或解决方法？

非常感激,

阿明.

PS.在iPad上的谷歌地图中也有一些丑陋的白线,也许有人知道如何摆脱那些:)

Answer 1

经过大量的紧张调试后,我想我找到了解决问题的方法(也许是你的问题).谷歌似乎也意识到了这个问题,这就是我找到解决方案的方法.我使用了一个名为weinre(文档)的强大调试器,它是基于webkit的浏览器的远程调试实用程序.

Google Maps API使用-webkit-transform: matrix(a,b,c,d,f);CSS属性进行缩放和平移.这一切都非常漂亮,但似乎iPad上基于webkit的浏览器存在一个错误(我尝试了其他三种浏览器,而不仅仅是Safari).我注意到许多(如果不是大多数)div元素放置在地图中,用于地图图块,叠加,阴影等都已-webkit-transform: translateZ(0px);应用.我将该行添加到我img和div元素中并立即修复了我的问题.

我没有通过链接样式表添加样式来尝试它,只是通过直接修改每个元素,但是你去了; 一个办法:

element.style.webkitTransform = "-webkit-transform: translateZ(0px);";

tl;博士的iPad错误...解决添加 -webkit-transform: translateZ(0px); 到任何消失的东西.