1

私は、問題を示す最小限のマークアップに問題を軽減するためのフィドル ( http://jsfiddle.net/929Zb/5/ ) を作成しました...これは、私のハイチャートが Safari でレンダリングされていないことです (バージョンWindows では 5.1.7 ですが、MacBook の最新バージョンでも実行しました。)

私の要件は、クロムで実行されているフィドルからのこのスクリーンショットに示すように、ウィジェットの複数列のレイアウトです:

チャートを正しく表示するChrome

そして、これが Safari で実行されているものと同じです:

Safari にグラフが表示されない

Safari は SVG をレンダリングし、デバッグでその上にカーソルを合わせると、HTML の要素が青色で強調表示されますが、表示されません!!

列を表示するために使用しているcssを以下に示します。列数を 2 から 1 に変更すると、グラフは Safari で正常に表示されます!!

.widget-container
{
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    column-count: 2;
    column-gap: 2em;
}
.widget {
    /* This is required to keep the widget div's together and not break them over columns  */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
margin-bottom: 2em; 
}

Safari を機能させる CSS の変更はありますか、それとも JavaScript の修正が必要ですか? これは CSS トランジションと関係があるのではないかと考えたので、アニメーションをオフにしてみましたが、まだアニメーションしていることを考えると、明らかに構文が間違っています。この問題には時間的な制約があるため、現在投稿していますが、進展があれば報告します。

4

1 に答える 1

1

これは、最初の列とは異なる列にグラフを表示する際の CSS の問題だと思います。colum-break-inside を無効にしても機能します。

私が提案できるのは、チャートコンテナの位置を無効にすることです: http://jsfiddle.net/929Zb/17/

.highcharts-container {
    position: inherit !important;
}
于 2013-09-19T15:18:55.250 に答える