私は、iPhone でうまく動作する必要があるraphaelを使用して、アニメーション化されたインタラクティブなグラフに取り組んでいます。苦労している 2 つの小さなレンダリングの問題があります。
1 つ目は、クリック ハンドラーがアタッチされている svg 要素をクリックすると、モバイル サファリはその周りに透明な灰色のボックスを描画して、何がクリックされたかを示します。ハイパーリンクをクリックしたときと同じです。この状況では、灰色のボックスは非常に醜いです。モバイルサファリにそうしないように指示するcssプロパティはありますか?
2 つ目の問題は、アニメーションに関するものです。アニメーションの継続時間中、モバイル サファリは svg キャンバスに醜い黒い境界線を追加します。アニメーションの進行中にのみ表示され、キャンバスの下端と右端にのみ表示されます。これを修正する方法はありますか？
これは、Raphael のページにあるデモの 1 つをコピー & ペーストして撮影したもので、背景は白です。
この記事には、役立つヒントがいくつかあります。
選択フラッシュを無効にする:
WebKit CSS プロパティ -webkit-tap-highlight-color を使用し、色のアルファを 0 に設定することでこれをオフにする方法があることがわかりました。私の Javascript コードでは次のようにします。
document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
「アクション」ポップアップを無効にする：
2 つ目に無効にする必要があるのは、UIWebView のコンテンツを数秒間タップ アンド ホールドすると表示される「アクション」ポップアップです。これは、-webkit-touch-callout という CSS プロパティによっても制御されます。この場合、それを「none」に設定するとうまくいきます。
document.documentElement.style.webkitTouchCallout = "none";