Question

我在我的网站上使用此标签切换器以及MapBox

的自定义地图

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>

现在我尝试在TabSwitcher的第17行（在/ div之前）发布iframe。这也粘贴在TabSwitcher的第21行（在/ div之前）。

点击运行后，会出现iframe地图。然而，当点击与第二个地图（第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;

}

没有它，两个地图都可以正常工作。但那个好转换失败了......

有没有人遇到类似的东西？ 注意：这只发生在Chrome

中

谢谢和问候。

Answer 1

我没有太多时间来研究这个问题，但也许你可以使用MapBox API来解决这个问题并解析JavaScript的结果。 API目前处于您必须与MapBox联系的状态。

这可以帮助您摆脱与浏览器中iframe实现相关的问题。

此致丹尼尔

iframe问题：Chrome上的CSS3过渡元素

1 个答案: