我正在为我的网站使用此选项卡切换器以及 MapBox 的自定义 map
MapBox 为我提供了这段代码以嵌入到我的 HTML 中
<iframe
width='100%' height='500px' frameBorder='0' src='https://a.tiles.mapbox.com/v3/ionious.gejgm43n/mm/zoompan,zoomwheel,geocoder.html?secure=1#11/35.8679/14.4539'>
</iframe>
现在我尝试将 iframe 发布到 TabSwitcher 的第 17 行(/div 之前)。 这也粘贴在 TabSwitcher 的第 21 行(/div 之前)。
点击运行后，iframe 映射出现。然而，当与第二张 map (第 21 行中的那张)进行点击交互时，一切都变得很有趣并且样式变得一团糟!
经过长时间的调试，我意识到以下 CSS 转换是造成这种行为的罪魁祸首:
.tabs {
position: relative;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
没有它，两个 map 都可以正常工作。但是那种美好的过渡已经失去了......
有没有人遇到过类似的情况？ 注意:这只发生在 Chrome 中
感谢和问候。
最佳答案
我没有太多时间研究这个问题，但也许您可以使用 MapBox API 来解决这个问题并解析来自 JavaScript 的结果。 API 当前处于您必须与 MapBox 联系的状态。
这应该可以帮助您摆脱与浏览器中的 iframe 实现相关的问题。
问候， 丹尼尔
关于css - iframe 问题 : CSS3 transition elements on Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20388379/