Question

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

list http://red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles.png

带数字的圆圈有“位置：相对”，所以我可以设置它们的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中不会发生这种奇怪的行为。

编辑：这只发生在数字有“位置：相对”的情况下，如果我在“位置：相对”旁边添加一个图像，它会有相同的奇怪行为

Answer 1

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

chrome中的mapbox怪异行为

1 个答案: