2012-05-12 2 views
3

CSSアニメーションのあるページがあります。このページには、Google Maps APIを介して生成された地図もあります。あなたは「メインナビゲーション項目」の上にホバリング前に「トグルサイズ」サイズのリンクをクリックするとSafariでGoogle Maps APIを使用してCSSアニメーションを終了する

http://dev.timmurtaugh.com/demo/projects-map-debug.html

は、あなたがトグル要素のリサイズが表示されます。

現在地ストリップダウンのデモを見ることができます予想通り。

しかし、CSSを使用してフライアウトメニューをトリガーするnav要素にカーソルを合わせると、フライアウトメニューが表示されないだけでなく、「Toggle Size」リンクが機能しなくなります。

、これは十分に奇妙ではなかったかのように、ウェブインスペクタすべてが通常通りに働いていると考えて - それはボックスの大きさを視覚的にそれがないときは、変化していることを報告します。

私はiframeでマップを分離しようとしましたが、同じ結果が得られます。

これはSafari(5.1.5)/ Macでのみ発生するようですが、他のブラウザでは確認できません(最新のChrome/Firefox/Internet Explorer 9)。

私はこの問題の提案を試してみました:jQuery jScrollPane issue/conflict with Google maps on Safari

...そして、この1中:Mac Safari 5.0.4 bug when using Google Maps API

は、私が何かできることはありますか?

+0

そこにはたくさんの動きがあります。インスペクタで再生した後で、「ウェブキット遷移」を「すべて」から「不透明」に変更すると、それはSafariで動作するように見えます。 ? – folktrash

+0

あなたは絶対リンクを使ってフィドルにこれを投げてもいいですか?それは非常に簡単に突き刺すだろう:) – folktrash

+0

完全なテンプレートは、破壊されたアニメーションのさらに多くのインスタンスを持っており、可視性の要因を排除するように完全な健康にそれらのすべてを復元したように見えます。 – Tim

答えて

2

上記のオーバーライド(可視性:可視; & -webkit-tranistion:opacity ...;)がこれは私のために働くようです。

http://jsfiddle.net/vxfhT/1/

+0

素晴らしいです、ありがとうございます。 – Tim

+0

w00!私の最初のSO答え*赤面* – folktrash