Fancybox3 & bootstrap3 — как исправить конфликт стилей?

Question

[Артём Кобяков]

Привет Всем!
Есть проблемка, подсоединив fancybox3 и bootstrap 3 происходит конфликт стилей и модальное окно дергается и как-то съехало.

Наглядно тут daogr.com/catalog

Буду очень признателен, если подскажете, где-что поправить, чтобы фенсибокс работал плавно и без скачков стилей.

Спасибо!

Answer 1

[Артём Кобяков]

Докопался сам:

В файл jquery.fancybox.css в .fancybox-wrap дописываем:

-webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;

Comments

[mrmju]

Меня это не спасло, пришлось делать вот так:
#fancybox-loading, #fancybox-loading, #fancybox-overlay, #fancybox-tmp, #fancybox-wrap, #fancybox-outer, #fancybox-content, #fancybox-hide-sel-frame,
#fancybox-close, #fancybox-error, #fancybox-img, #fancybox-frame, #fancybox-left, #fancybox-right, #fancybox-left-ico, #fancybox-right-ico, .fancybox-bg{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

[Alexander Mischuk]

@mrmju
.modal-open,
.modal {
overflow: auto!important;
}

[Trionik]

Alexander Mischuk: не помогло

Answer 2

[Виталий Киренков]

Я так понимаю, что проблема в * { -moz-box-sizing: border-box;} в бутстрапе. Если в фаирбаге его вырубить, скачок изображения проходит. Попробуйте переопределить box-sizing.

Comments

[Артём Кобяков]

да! почти

Answer 3

[Alexander Mischuk]

53 строка, jquery.fancybox.css
.fancybox-lock {overflow: visible; width: auto;}
Проблема в том, что убирается вертикальный скролбар и из-за это происходит скачек.
Плюс у вас при открытии модального окна к тегу html добавляется отступ в 17 пикслей. Неудивительно, что съезжает.
.fancybox-margin {margin-right: 17px;}
Уберите его или где-нибудь через !important перебейте это свойство.

Comments

[Артём Кобяков]

к сожалению, не помогает(

[Alexander Mischuk]

@Kotovod .fancybox-lock по прежнему overflow: hidden !important