css - chrome 中的 mapbox 奇怪行为

Question

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

_{(来源:red-team-design.com)}

带数字的圆圈有“position:relative”，所以我可以设置它们的 z-index。在有序列表下，我有一个 mapbox map 。在我放大或缩小 map 之前，页面会正确呈现。当我这样做时，列表项中的相关元素表现得很奇怪。右列中的数字瞬间移动到左列数字下方，然后移回。据我所知，这只是因为类“.leaflet-zoom-anim”被添加到我的 map ，然后被取消。该 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 中。

编辑:只有当数字有“position:relative”时才会发生这种情况，如果我在它旁边添加一个带有“position:relative”的图像，它会有同样奇怪的行为

Answer 1

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