Sign in to follow this  
Nikita_Barinov

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

Recommended Posts

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

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

 

e69de818f1d5.png

 

А вот как в Safari: 

 

1bde6fb8099c.png

 

Как видите, продолжение  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;}

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

Share this post


Link to post
Share on other sites

Какие-то у вас хреновые флексы. Зачем так к примеру 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 by amelice

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Черновик.  

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

Share this post


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

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

 

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

Share this post


Link to post
Share on other sites

 

У меня возник другой вопрос, может кто знает - значения свойства 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. Но на деле может быть все что угодно.

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

Share this post


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

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

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

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

 

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

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

Share this post


Link to post
Share on other sites

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

 

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-контейнер с дочерним элементом <span> (т.е. <span> в данном случае flex-элемент). У <span> есть дочерний элемент <i> с display:inherit. Если мы при этом выставляем <span>'у float: right/left, тогда его дочерний элемент <i> будет блоком. Если же мы не трогаем <span>, то <i> будет инлайном.

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

Share this post


Link to post
Share on other sites

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

 

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

Я думала, что если задать контейнеру - 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 by amelice

Share this post


Link to post
Share on other sites

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Вот тут говорится по другому, что влияет на отображение контента внутри флекс-итемов 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-

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

Share this post


Link to post
Share on other sites

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

 

 

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

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

Edited by amelice

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By kapushoniha
      Добрый день!
      Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело.
      Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать.
        Для начертаний bold и 300 все ок.
      Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ?
      Шрифт подключаю так:
      <style> @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Medium.eot'}}"); src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'), url("{{asset 'Gotham-Medium.woff'}}") format('woff'), url("{{asset 'Gotham-Medium.ttf'}}") format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Bold.eot'}}"); src: url("{{asset 'Gotham-Bold.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Bold.woff2'}}") format('woff2'), url("{{asset 'Gotham-Bold.woff'}}") format('woff'), url("{{asset 'Gotham-Bold.ttf'}}") format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Light.eot'}}"); src: url("{{asset 'Gotham-Light.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Light.woff2'}}") format('woff2'), url("{{asset 'Gotham-Light.woff'}}") format('woff'), url("{{asset 'Gotham-Light.ttf'}}") format('truetype'); font-weight: 300; font-style: normal; } </style>  
      Заранее спасибо!
       
       

    • By Flex12
      Всем привет. У меня при верстке сайта по уроку возникла проблема. Сверстал все один в один (перепроверил несколько раз), но по итогу получается смещение элементов. Из за чего такое может произойти? Ссылку на скрин оставлю ниже (1левый экран то как у него, а (2)правый то как у меня) Скрин для наглядности, чтобы понять о чем я.
       
  • Member Statistics

    46,451
    Total Members
    3,128
    Most Online
    rhouland
    Newest Member
    rhouland
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Вернулся в свою созданную тему через 4,5 года. )) После создания темы около года верстал заказы на фрилансе. От обычной верстки до полноценных LP и небольших сайтов. Даже один раз из своей верстки шаблон Wordpress сделал.   Потом заинтересовался другими нишами и верстку забросил. Арбитражил, занимался СЕО, даже трейдил криптовалютой больше года. Но опять потянуло в вебразработку. Пытаюсь снова все вспомнить. Мешает только основная работа - мало времени остается на своё хобби.  В общем, кому сроки не жмут и кто не боится доверится джуниору, милости просим. Сверстаю, подправлю, помогу. В свободное от работы время. Бескорыстно. Просто хочется снова покодить и не просто так, а чтобы с пользой.  Почта : zdl79@mail.ru Skype : forest19791 Телеграмм : https://t.me/forestino
    • Могу попробовать. Опыт верстки 1 год. Но в связи с основной работой, не связанной с IT, мало на это времени. zdl79@mail.ru
    • Здравствуйте, кажется я делаю что-то не так, но вот что именно никак не пойму.
      Проблема в следующем: подключаю карусель и блок становится неактивен, хотя вроде бы все должно работать как нужно.
      Пробовал подключать карусель и через cdn и через скачанный архив - результат один и тот же.
      Открывал через google, firefox и opera-у - все так же никакого сдвига.
      Подключал по инструкции на официальном сайте.
      Пробовал использовать SlickSlider, но результат тот же.
  • Popular Contributors