Проблемы с flex в Safari

Nikita_Barinov · August 10, 2015

Приветствую!

Ребят, создавал тут тему недавно насчет одинаковой высоты у блоков, добрый человек посоветовал использовать flex и показал пример(спасибо ему огромное!). Воспользовался я его советом, все хорошо получилось, но такая красота получается только в Chrome, Firefox да Opera, а в Safari нифига. Вот как должно быть:

А вот как в Safari:

Как видите, продолжение background нет(высота фиксированная, хотя с flex должна была установится высота блока main) да и тени почему-то тоже нет(пропадает, когда увеличиваешь страницу).

Вот верстка:

<!DOCTYPE html><html lang="ru"><head>    <meta charset="UTF-8">    <title>{title}</title>    <link href="engine/templates/nn/tmp/css/style.css" rel="stylesheet">    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>    <script type="text/javascript" src="engine/templates/nn/tmp/js/hint.js"></script>    <script type="text/javascript">        if (!('flexWrap' in document.createElement('div').style)) {            document.documentElement.className += ' no-flex';        }    </script></head><body><div onclick="show('none')" id="wrap"></div><div id="wrapper">    <div id="left">{left}</div>    <div id="main">{main}</div>    <div id="right">{right}</div></div><footer>    <div class="footer_content">        {footer}    </div></footer></body></html>

Вот CSS:

#wrapper {    display: flex;    display: -webkit-flex;    flex-flow: row nowrap;    -webkit-flex-flow: row nowrap;     margin: 75px auto 16px;    width: 1120px;    background-color: #fff;    border-radius: 5px;    overflow: hidden;}.no-flex #wrapper {    display: table;    width: 100%;    max-width: 1122px;}.no-flex #left,.no-flex #right,.no-flex #main {    display: table-cell;    vertical-align: top;}#left {    width: 235px;    float: left;}#right {    width: 285px;    background-color: #f6f9fa;    float: right;    flex-shrink: 0;}#main {    width: 420px;    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);       -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);    float: left;    padding: 50px 90px;    position: relative;}

Буду благодарен за любую помощь!

Great Rash · August 11, 2015

Какие-то у вас хреновые флексы. Зачем так к примеру float?

Vlad · August 11, 2015

Какая версия Сафари, ОС?

Nikita_Barinov · August 11, 2015

Какая версия Сафари, ОС?

Safari 8.0.7 на OS X 10.10.4

Nikita_Barinov · August 11, 2015

Какая версия Сафари, ОС?
Safari 8.0.7 на OS X 10.10.4

Хех, спасибо! Убрал float'ы и все заработало!

amelice · August 11, 2015

Какие-то у вас хреновые флексы. Зачем так к примеру float?

В документации флекса про флоат написано следующее:

float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

Первое предложение понятно.

А вот со вторым не до конца понятно. Если правильно поняла, то написано - что флоат все еще влияет на генерацию бокса, тем самым влияя на свойство display в вычисляемых значениях.

Проверила в браузере, если задать float флекс-итему, то оно сбрасывается в none, а display зависит только от родителя.

а как на самом деле?

Edited August 11, 2015 by amelice

Great Rash · August 12, 2015

В документации пишут о том, что если. к примеру, инлайн-элементу задать float, то он станет блочным. Но при этом он не выпадет из потока. Как оно на самом деле реализовано в браузерах хз. Я даже не знаю это уже рекомендация или ещё воркинг драфт (лень лезть в W3C искать)?

amelice · August 12, 2015

Черновик.

У меня возник другой вопрос, может кто знает - значения свойства display (flex или inline-flex) контейнера влияет только на его вместительность? Я заметила как не меняй это свойство, у итемов display: block.

lexxcode · August 12, 2015

У меня возник другой вопрос, может кто знает - значения свойства display (flex или inline-flex) контейнера влияет только на его вместительность? Я заметила как не меняй это свойство, у итемов display: block.

Ну дочерние элементы становятся flex-item. Сам по себе display у флекситемов не меняется, как бы. flex-item'ом может стать и таблица, она станет гибкой, но свои внутренние свойства таблицы она не потеряет, то есть тот самый display: table;

А что касается float и clear, то в документации написано, что, по идее, они не должены влиять на flex-item. Но на деле может быть все что угодно. Видимо это зависит от реализации всего этого добра в браузерах.

psywalker · August 12, 2015

У меня возник другой вопрос, может кто знает - значения свойства display (flex или inline-flex) контейнера влияет только на его вместительность? Я заметила как не меняй это свойство, у итемов display: block.
Ну дочерние элементы становятся flex-item. Сам по себе display у флекситемов не меняется, как бы. flex-item'ом может стать и таблица, она станет гибкой, но свои внутренние свойства таблицы она не потеряет, то есть тот самый display: table;

Позволю себе не согласиться. Насколько я понимаю, если изменить display у ближайших потомков (а значит у flex-item'ов) flex-контейнера, то эти потомки всё равно останутся flex-элементами, и будут плясать по их правилам. Два разных контекста не могут ужиться вместе в CSS (по крайней мере на сегодняшний день). display: flex; перебьёт остальные контексты. Для наглядности я сделал тестовый пример, который, например, в фоксе и хроме отображается по разному, но, имхо, прав тут именно хром.

А что касается float и clear, то в документации написано, что, по идее, они не должены влиять на flex-item. Но на деле может быть все что угодно.

Вот тут тоже чуть не согласен. Имхо, флексовый контекст в первую очередь предполагает то, что ты здесь описываешь, поэтому с реализацией в браузерах в этом плане точно не должно быть проблем.

lexxcode · August 12, 2015

Позволю себе не согласиться. Насколько я понимаю, если изменить display у ближайших потомков (а значит у flex-item'ов) flex-контейнера, то эти потомки всё равно останутся flex-элементами, и будут плясать по их правилам. Два разных контекста не могут ужиться вместе в CSS (по крайней мере на сегодняшний день). display: flex; перебьёт остальные контексты. Для наглядности я сделал тестовый пример, который, например, в фоксе и хроме отображается по разному, но, имхо, прав тут именно хром.

Вообще-то ты сказал ровно то же самое что и я, только с другой точки зрения. Все верно, flex-элементы это flex-элементы, и да они взаимодействуют напрямую со своим ближайшим родителем flex-контейнером. Так оно и есть. Но с точки зрения flex-элемента, условно говоря, меняется его внешнее (наружнее) взаимодействие, с другими элементами в стаке. Но те элементы которые находятся внутри flex-элемента живут своей нормальной жизнью. Пример твой не подходит под то о чем я говорю.

Я имел ввиду примерно это http://jsfiddle.net/alexriz/4j6gk9bv/таблица не ломается, не смотря на то, что она является flex-элементом.

(Кстати, странное поведение, таблички не реагируют на flex-grow: 1;, а просто блоки нормально ведут себя)

Вот тут тоже чуть не согласен. Имхо, флексовый контекст в первую очередь предполагает то, что ты здесь описываешь, поэтому с реализацией в браузерах в этом плане точно не должно быть проблем.

Собственно это ведь не я придумал, так даже в документации написано. Ведь не мне тебе рассказывать, как иногда в браузерах реализуется тот или иной функционал. А учитывая довольно сложное поведение float, предположить возможное влияние на контекст флекса, вполне закономерно. Хотя бы из-за того что в браузере может быть банальная ошибка в работе этого добра.

psywalker · August 13, 2015

Значит, я пообщался с Ильёй и он объяснил мне некоторые моменты.

1. Что касается display:table (or display: table-cell) на дочерних элементах flex-контейнера:

https://code.google.com/p/chromium/issues/detail?id=243056
http://dev.w3.org/csswg/css-flexbox/#table-items
http://css-live.ru/articles/mysterious-css-anonymous-boxes.html

В общем, как видно по информации из ссылок, дело касается только display:table (or display: table-cell). Т.е. если непосредственным потомкам flex-контейнера (т.е. flex-элементам) выставить display:table (or display: table-cell), то flex-элементы окажутся в табличном контексте. Поэтому в моём вышеприведённом примере прав всё-таки фокс).

Да, float'ов это не касается*

2. Что касается вопроса Чинары.

Сразу объясню на примере. Допустим у нас есть flex-контейнер с дочерним элементом (т.е. в данном случае flex-элемент). У есть дочерний элемент с display:inherit. Если мы при этом выставляем 'у float: right/left, тогда его дочерний элемент будет блоком. Если же мы не трогаем , то будет инлайном.

Но всё это только в теории, и нужно ещё проверять, и задавать вопросы самим спекоделам.

amelice · August 16, 2015

Ребята спасибо за пояснения.

Макс, мой вопрос звучал иначе, чем ты растолковал.

Я думала, что если задать контейнеру - inline-flex, то флекс-итемы должны вести себя как инлайны и соответственно поменяется display.

Но как бы не меняла свойство display контейнеру - flex или inline-flex, у флекс-итемов дисплей оставался block. Стало интересно, на что тогда влияет inline-flex )

Прошлась по ссылкам, что ты привел и поняла что они останутся блочными . Там написано, что если флекс-итем был инлайновым, то становится блочным. а если флекс-итем имеет display-cell, то формируется анонимный блок display: table вокруг него - вот он и будет флекс-итемом.

Так что, наверно свойство контейнера inline-flex влияет на его вместительнось.

По поводу display: inherit

http://codepen.io/amelice/pen/PqvZEG элемент .inner стал блочным, не смотря что у родителя (flex-item) display:inline.

Edited August 16, 2015 by amelice

lexxcode · August 16, 2015

Разница между display: flex; и display: inline-flex;, только в их внешнем взаимодействии с другими элементами в потоке, аналогично display: block; и display: inline-block; соответственно. На вложенные элементы действие идентичное, при любом значении.

Для инициализации контейнера достаточно присвоить, через css, элементу display: flex; или display: inline-flex;. Разница между flex и inline-flex заключается лишь в принципе взаимодействия с окружающими контейнер элементами, подобно display: block; и display: inline-block;, соответственно.

Я писал об этом в своей статье

amelice · August 16, 2015

Вот тут говорится по другому, что влияет на отображение контента внутри флекс-итемов http://css.yoksel.ru/flexbox/

Но и твой вариант тоже работает. http://codepen.io/amelice/pen/xGNZMv

lexxcode · August 16, 2015

Вот тут говорится по другому, что влияет на отображение контента внутри флекс-итемов http://css.yoksel.ru/flexbox/ Но и твой вариант тоже работает. http://codepen.io/amelice/pen/xGNZMv

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

http://jsfiddle.net/alexriz/2L5zzteb/

Это все из одной пьесы:

display: block; --- display: inline-block;

display: table; --- display: inline-table;

display: flex; --- display: inline-flex;

Контекст внутри создается одинаковый, что у простого свойства, что у свойства с префиксом inline-

Разница лишь в том, как сам контейнер будет вести себя в потоке

amelice · August 16, 2015

Во-первых, пока вывод был не сделан. ) Я видела вариант с той статьи и твой вариант, но не успела толком проверить.

http://jsfiddle.net/alexriz/2L5zzteb/

Во-вторых, в твоем примере для меня стало открытием поведение inline-block, который при малой ширине растягивается на всю ширину контента.

Отдельное спасибо за пример!

Edited August 16, 2015 by amelice

Sign In

Проблемы с flex в Safari

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information