chrome中的mapbox奇怪行为答案

【问题标题】：mapbox weird behavior in chromechrome中的mapbox奇怪行为
【发布时间】：2014-08-02 08:32:37
【问题描述】：

我有一个有序列表，每个列表上都有一个数字，如下所示：

带有数字的圆圈具有“位置：相对”，因此我可以设置它们的 z-index。在有序列表下，我有一个 mapbox 地图。在我放大或缩小地图之前，页面会正确呈现。当我这样做时，列表项中的相关元素表现得很奇怪。右栏中的数字移动到左栏中的数字下方一瞬间，然后向后移动。据我所知，这只是因为“.leaflet-zoom-anim”类被添加到我的地图中，然后被取消。该 css 类如下所示：

.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated,.leaflet-zoom-anim .leaflet-tile {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

请注意，这种奇怪的行为不会发生在 safari 或 firefox 中。

编辑：这仅发生在数字具有“位置：相对”并且如果我在其旁边添加带有“位置：相对”的图像时，它具有相同的怪异行为

【问题讨论】：

标签： css google-chrome webkit css-transitions

【解决方案1】：

自己找到了解决方案。这似乎是我的 Chrome 版本（35.0.1916.114）的问题。我通过添加 -webkit-transform: translate3d(0px, 0px, 0px); 解决了这个问题到包含地图的 div 元素

【讨论】：