GoogleマップのマーカーがiPhone/iPadの特定のズームレベルでのみ消えます

Question

Google Maps API V3を使用して非常に奇妙な問題が発生しました。

私はここに、クリックでそれぞれのいくつかのカスタムinfoboxesとマーカーの多くを示しiframe内のマップを持っている：

http://www.whist.ch/karte

すべては、すべて私がMac上でテストされているブラウザやPC上で正常に動作します（Chrome、Firefox、IE）。しかしiPadやiPhoneでは、ズームインしすぎるとマーカーが消えて、ズームアウトすると再び表示されます。

誰でも説明や修正がありますか？

非常に高く評価された。

アルミン。

ps。 iPad上のGoogleマップにも醜い白い線があるかもしれません。でも、誰かがそれらを取り除く方法を知っているかもしれません:)

Answer 1

激しいデバッグの後、私は自分の問題（おそらくあなたも） 。また、Googleが問題を認識しているようだが、それが解決策を見いだした方法だ。 weinre（documentation）という素晴らしいデバッガを使用しました。これはWebkitベースのブラウザ用のリモートデバッグユーティリティです。

Google Maps APIは、-webkit-transform: matrix(a,b,c,d,f); CSSプロパティを使用してピンチズームとパンを行います。それは非常にきれいですが、iPad上のWebkitベースのブラウザにバグがあるようです（私はSafariだけでなく、他の3つのブラウザを試しました）。マップタイル、オーバーレイ、シャドウなどのマップに配置されたdiv要素の多くは、-webkit-transform: translateZ(0px);が適用されていたことがわかりました。私はその行を私のimgとdiv要素に追加し、すぐに私の問題を解決しました。

私は、リンクされたスタイルシートを使ってスタイルを追加してみましたが、各要素を直接変更するだけで試しました。解決策：

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

TL; DRが、それは消えるものに-webkit-transform: translateZ(0px);を追加解決するための... iPadのバグです。

Answer 2

私は、-webkit-transform：translateZ（0px）リセットが問題を解決したことを確認できました。私はこれをGoogleのインフォボックスプラグインの問題の多くとして考えています。 InfoBox.prototype.setBoxStyle_で

を：：

// Apply style values defined in the boxStyle parameter: 
boxStyle = this.boxStyle_; 
for (i in boxStyle) { 
    if (boxStyle.hasOwnProperty(i)) { 
    this.div_.style[i] = boxStyle[i]; 
    } 
} 
//Fix for iOS dissappearing InfoBox 
if (typeof this.div_.style.webkitTransform === 'undefined') this.div_.style.webkitTransform = 'translateZ(0px)'; 

// Fix up opacity style for benefit of MSIE: 

Answer 3

私はChrome Version 51.0.2704.84で同じ問題を抱えていた次のように

私の修正は、インフォボックススクリプト（v1.1.11）を更新します。さまざまなマーカータイプを使用して最大ズームを取得すると、マーカーが消えました。

このソリューションは、私を助け：

-webkit-transform: translateZ(0px);