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 回答