вопросы Iframe: CSS3 переходные элементы на Chrome

Question

Я использую эту вкладку переключатель для моего сайта вместе с пользовательской карты по MapBox

TabSwitcherCode

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 на линии 17 (перед/дел) в TabSwitcher. Это также было вставлено в строку 21 (перед/div) TabSwitcher.

После запуска запуска появляются карты 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 в браузерах.

С уважением, Daniel