Кроссбраузерность в Сафари на OS X + iOS?

Question

[GaserV]

Товарищи. Подскажите пожалуйста. Сделал верстку. Просматриваю в сафари и в хроме на ОС Х - все норм. ПРосматриваю в эмуляторе XCODE  там отличается немного. А именно например блок со слайдером не центрируется по высоте. Хотел узнать. XCODE - дает действительное отображение с девайсов или же лучше доверится браузерной адаптивке? На что делать акцент?

Answer 1

[Александр]

Как правило, отличий между Safari в эмуляторе и Safari на реальном девайсе нет. Если в эмуляторе проявился баг, скорее всего он будет и на реальном устройстве.

Comments

[GaserV]

У вас есть возможность просмотреть? могу поделится ссылкой.

[GaserV]

Просто сейчас присмотрелся и увидел уже следующую ситуацию. В сафари получается на декстопе элемент центрируется вертикально, но если сделать ресайз окна до 768 например - то не фига не центрируется, а прилепает к верху.

[Александр]

Да, могу потестить на iPhone SE.

[GaserV]

Aleksandr Bukhalo: w25740e5.bget.ru/ms/ не могли бы вы глянуть?

[Александр]

dsh.re/35af1 dsh.re/4a627 dsh.re/7fe0e dsh.re/0e380 dsh.re/daeed

[GaserV]

Aleksandr Bukhalo: ну вот видите. слайдер в первом блоке не центрируется вертикально. Как править? В сафари то он центрируемая, но при ресайзе - нет..

[Александр]

GaserV: в Safari на десктопе абсолютно тоже самое dsh.re/94d84

[GaserV]

Aleksandr Bukhalo: так это ведь мобилка)

[Александр]

GaserV: а что вам мешает сделать padding-top через медиазапрос? dsh.re/29c94

[GaserV]

Aleksandr Bukhalo: мешает то, что в хроме он центрируемая, а если я еще и паддинг задам, то в сафари встанет по центру например, а в хроме уедет вниз

[Александр]

GaserV: не сразу вас понял, это баг webkit https://bugs.webkit.org/show_bug.cgi?id=137730

[GaserV]

Aleksandr Bukhalo: не совсем понял как пофиксить. Можете подсказать?

[GaserV]

Aleksandr Bukhalo: дело в том что на декстопе в сафари работает все как надо. а при ресайзе окна - плывет.

[Александр]

GaserV: не уверен, но можно попробовать вот так:

style.css, строка 818, меняем height: 100% !important; на height: 10em !important;

[GaserV]

Aleksandr Bukhalo: работает, но не совсем адаптивно. Быть может лучше на js определять высоту окна и вписать в атрибут style в px?

[Александр]

GaserV: это уж вам видней)

[GaserV]

Aleksandr Bukhalo: сейчас посмотрел код внимательнее. Получается высота 100% то работает в сафари, но блоки внутри не центрирует. Это связано с тем, что них pos:abs наверное.

[GaserV]

Aleksandr Bukhalo: и да. в хроме тоже увидел это) у меня получается блок с realtive, внутри него картинки с absolute. И они прижаты к верху. можно ли их центрировать внутри него как-нибудь?

Answer 2

[Rou1997]

Официальный симулятор скорее всего не "врет", ну можете еще этим проверить, один из них может "врать" (особенно BrowserStack), но оба сразу вряд ли.