Highcharts，Safari 6和垂直對齊條形圖的奇怪情況

我最近更新了Safari 6，發生了什麼事情是Highcharts（2.3.0+; 2.2.3並沒有渲染系列）現在呈現我的動態條形圖與其他顯示問題垂直（標籤位置不正確，當光標明顯遠離元素時，懸停在某些元素上會激活）。Highcharts，Safari 6和垂直對齊條形圖的奇怪情況

Bar chart rendering incorrectly with incorrect label positions on hover

我已經嘗試剝離的東西回來了，它與劇照中的錯誤使得它。我做了一個基本的JSFiddle圖表，它似乎完美呈現。

我將Safari 6降級回5.1.7（sheesh，這是一個令人頭疼的問題），它正常渲染。我只是有點擔心，因爲我在PhoneGap/Cordova應用中使用它，如果Webkit與iOS共享，那麼當Mobile Safari更新到最新版本的Webkit時，它可能會中斷。有可能是因爲圖表位於受重要動態CSS樣式影響的複雜視圖中，可能Safari/Webkit正在改變Highcharts計算某些事情的方式。實際上，這是一個難以解決和調試的難題，我沒有發現與經歷過相同的其他人很多的在線上，只是希望這裏的某個人可能經歷過相同的或有一些有價值的洞察力提供。

編輯：我還應該提及我使用的其他圖形類型（列，行）也呈現不正確，但沒有不正確的條形類型。

來源

2012-09-05 Matt Scheurich

這是一個問題，因爲我們遇到了同樣的問題。你是否動態改變圖表類型？ – wergeld

沒有。只有系列。其他的原因是結果顯示的頁面總是在計算結果時被擦除和重繪。我想知道是否可能與獲取renderTo元素的尺寸有關，但即使我通過CSS設置它們仍會隱藏渲染。 –

把這個關掉後，我回到了這個問題，發現我有一些CSS的設置，哪些Highcharts/Safari似乎不喜歡。

爲了便利在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-28 04:04:16

由於Chrome也受到影響，因此似乎是Webkit的一件事。 Firefox很好（但是兩個圖表之間有細微的差別 - 當你在兩者之間切換時，觀察網格線）。 –

Highcharts，Safari 6和垂直對齊條形圖的奇怪情況

回答

相關問題