Приветствую! Может кто-нибудь уже сталкивался с такими проблемами.
Есть сайт http://stroymechanika.intelinets.ru/
Модалки fancybox (заказать звонок (http://take.ms/OeqbJ), оставить заявку (http://take.ms/0dCvS)) отображаются некорректно на мобильных устройствах. Выглядят слегка растянуто, примеры: http://take.ms/3YomPG http://take.ms/BktjY
Модалки работают на type: ajax
Инициализируются вот так:
$.fancybox({
href: url,
type: "ajax",
openSpeed: 0,
closeSpeed: 400,
openEffect: 'none',
padding: 0,
beforeShow: function(){
$(".fancybox-overlay").addClass("r741-opened");
if(typeof callback === "function"){
callback();
}
},
beforeClose: function(){
$(".fancybox-overlay").removeClass("r741-opened");
},
tpl: {
wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div><div class="r741-message" ><div class="r741-message-inner" id="r741-message"></div></div></div>'
}
})
Что только не делал. В том числе все стили сносил, а все равно растянутая.
Если еще подскажите почему на браузерах safari overlay наполовину перекрывает модалки, то вообще отлично будет.