Leaflet缩放（zoom）控件在Safari中缩放或移动地图时消失问题

问题根因 #

这个是Safari内置WebKit内核独有的渲染逻辑差异导致的，和Chromium、Gecko内核的渲染规则不一致，具体原因分为三类：

• transform父容器的裁剪规则差异：你使用的地图库大概率是通过transform: translate3d实现地图平移效果，当地图容器应用transform属性后，Safari会强制对内部绝对定位的子元素做超出初始容器视口的裁剪，哪怕你显式设置了overflow: visible也不会生效。当地图向左偏移时，原本在右侧的控件位置超出了地图容器的初始可视范围，就会被Safari直接裁剪隐藏，Chrome和Firefox没有这个特殊规则，所以表现正常。
• 合成层渲染bug：如果你的控件元素没有单独创建独立的合成层，Safari会将其和地图容器合并为同一个渲染层，当地图平移时，只会重绘初始容器范围内的内容，超出部分会被判定为不可见直接跳过渲染。
• 绝对定位计算偏差：如果控件是挂载在地图容器内部做绝对定位，当地图容器应用transform后，Safari对内部绝对定位元素的坐标计算基准会出现偏移，导致控件被判定为处于视口外而不渲染。

修复方案 #

• 将控件元素从地图容器内部移出，改为挂载在和地图容器平级的父节点下，直接相对于页面或者外层父容器做绝对定位，从根源避开transform父容器对内部定位元素的影响。
• 给控件元素添加CSS属性强制创建独立合成层：

.map-control {
  transform: translateZ(0);
  will-change: transform;
}

• 显式给地图容器设置overflow: visible !important;，同时添加contain: layout paint; 规范Safari的渲染行为。
• 如果你使用的是第三方地图类库（如Leaflet、Mapbox GL JS），不要手动插入自定义控件，优先使用类库官方提供的控件添加API，官方API已经做了Safari兼容处理。

内容的提问来源于stack exchange，提问作者Keith D Kaiser