Highcharts、Safari6和垂直对齐条形图的奇怪情况

Question

我最近更新了Safari6，发生的情况是Highcharts (2.3.0+；2.2.3根本不会渲染系列)现在垂直呈现我的动态条形图，还有其他显示问题(标签定位不正确，当光标明显比元素更远时，悬停在某些元素上会被激活)。

​

​

我尝试过剥离后的东西，但它仍然显示了错误。我做了一个图表的基本JSFiddle，它看起来呈现得很完美。

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

编辑:我还应该提到，我使用的其他图形类型(列、线)也不能正确呈现，但没有一个像条形图类型那样不正确。

Answer 1

在把这件事推迟之后，我又回到了这个问题上，发现我有一些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展示了这一突破(使用Safari6查看--因为我一直在为iOS开发，所以没有在其他任何环境中进行过测试)。