Cordova Highcharts、Safari 6和垂直对齐条形图的奇特案例

我最近更新了Safari 6，所发生的事情是Highcharts（2.3.0+；2.2.3根本不渲染该系列）现在垂直渲染我的动态条形图，并伴有其他显示问题（标签未正确定位，当光标明显远离元素时，悬停在某些元素上会被激活）

我试着把东西剥离回去，但它仍然会错误地呈现出来。我做了一个基本的JSFIDLE图表，看起来效果很好

我将Safari 6降级到5.1.7（真让人头痛），它的渲染正常。我只是有点担心，因为我正在PhoneGap/Cordova应用程序中使用它，如果Webkit与iOS共享，那么当Mobile Safari更新到最新版本的Webkit时，它可能会崩溃。由于图表位于受重要动态CSS样式影响的复杂视图中，因此Safari/Webkit可能正在改变某些东西，特别是Highcharts计算某些东西的方式。这实际上是一件非常难理解和调试的事情，我在网上没有找到太多有同样经历的人，只是希望这里的人也有同样的经历，或者有一些有价值的见解可以提供

---

编辑：我还应该提到，我使用的其他图形类型（列、线）的渲染也不正确，但没有一种图形类型像条形图那样不正确。

在推迟之后，我回到问题上来，发现我有一些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的东西混在一起。这里有一个例子显示了这一突破（Safari 6的视图——没有像我为iOS开发的那样在任何其他方面进行测试）。

这里有一个问题要问你，因为我们遇到了相同的问题。您是否动态更改图表类型？一点也不。只有这个系列。另一件事是，在计算结果时，显示结果的页面总是被擦除和重画。我想知道这是否与获取renderTo元素的尺寸有关，但即使我通过CSS设置这些尺寸，它仍然会破坏渲染。这似乎是一个Webkit问题，因为Chrome也会受到影响。Firefox很好（但这两个图表之间有一点不同——在这两个图表之间切换时，请注意网格线）。