1

最近 Safari 6 を更新しましたが、Highcharts (2.3.0+; 2.2.3 ではシリーズがまったくレンダリングされません) が動的な棒グラフを垂直にレンダリングし、他の表示の問題 (ラベルが適切に配置されていない、特定の要素へのホバリングは、カーソルが要素から著しく離れている場合にアクティブになります)。

ホバー時のラベル位置が正しくなく、棒グラフが正しくレンダリングされない

物事を取り戻そうとしましたが、それでもエラーが表示されます。チャートの基本的な JSFiddle を実行したところ、完全にレンダリングされたようです。

Safari 6 を 5.1.7 にダウングレードして戻しましたが (これは頭の痛い問題でした)、正常にレンダリングされます。PhoneGap/Cordova アプリで使用しているので、少し心配です。Webkit が iOS のものと共有されている場合、Mobile Safari が Webkit の最新バージョンに更新されたときに壊れる可能性があります。グラフは重要な動的 CSS スタイルの影響を受ける複雑なビュー内に配置されているため、おそらく Safari/Webkit が、特に Highcharts が特定のものを計算する方法で何かを変更している可能性があります。これは実際に把握してデバッグするのが非常に難しいことであり、同じことを経験した他の人がオンラインであまり見つけていないので、ここにいる誰かが同じことを経験したか、貴重な洞察を提供してくれることを願っています.

編集:私が使用している他のグラフタイプ(列、線)も正しくレンダリングされていませんが、バータイプほど正しくないことにも言及する必要があります。

4

1 に答える 1

2

これを延期した後、私は問題に戻って、Highcharts/Safari が好まないように思われるいくつかの CSS 設定があることを発見しました。

PhoneGap 内でのモバイル開発とレンダリングの精度/滑らかさを容易にするために、幅広い CSS 定義をいくつか用意しました。

* {
    -webkit-touch-callout:  none;
    -moz-touch-callout:     none;
    touch-callout:          none;
    -webkit-user-drag:      none;
    -moz-user-drag:         none;
    user-drag:              none;
    -webkit-user-select:    none;
    -khtml-user-select:     none;
    -moz-user-select:       none;
    -ms-user-select:        none;
    user-select:            none;

    /* This stops the coloured overlay when a person clicks an element */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Stuff to do with positioning and utilising the 3D engine for rendering speed */
    -webkit-transform:      translateZ(0);
    -moz-transform:         translateZ(0);
    transform:              translateZ(0);
}

変換宣言を削除すると、Highcharts は正常に動作します。3D ポジショニングがおそらく SVG のものとうまくいかないことは間違いないので、そのような幅広いセレクターを実行するのはおそらく良くありません。これは、ブレークを示す JSFiddleです(Safari 6 で表示します。iOS 用に開発しているため、他ではテストしていません)。

于 2012-09-28T04:04:16.547 に答える