CSS3: гибкий переход больше не работает с Safari 13.1 (Ma c) - PullRequest
Новая
       21

CSS3: гибкий переход больше не работает с Safari 13.1 (Ma c)

1 голос
/ 17 апреля 2020

Вот самый простой код, который работает в любом современном браузере (а также в самых современных браузерах Safari), но не в версии 13.1, которую я только что обновил на своей Ma c.

Дело в том, получить раздел, чтобы развернуть его при наведении на него, в то время как другие разделы остаются одинаково большими. Достаточно просто. В Safari 13.1 все работает (расширяется нормально), за исключением анимации гибкого перехода.

В Safari 13.1 это происходит внезапно, в то время как в любом другом браузере, включая Chrome / Firefox / более старый Safari, переход плавный.

Любое исправление или обходной путь (на основе flex), пожалуйста?

Спасибо. 

section {
  height: 200px;
}

.list {
  display: flex;
}

.color {
  display: flex;
  flex: 1 1 10em;
  overflow: hidden;
  transition: flex 500ms;
}

.color:hover {
  flex: 1 1 40em;
}
<div class="list">

  <section class="color" style="background: red"></section>

  <section class="color" style="background: blue"></section>

  <section class="color" style="background: green"></section>

  <section class="color" style="background: yellow"></section>

  <section class="color" style="background: orange"></section>

</div>

Дополнительное примечание : я знаю, что замена гибкого перехода на (мин.) Переходы ширины работает, но это подразумевает некоторые нежелательные побочные эффекты, так как очень быстро усложняется, когда в игру вступают границы и отступы, особенно когда веб-сайт отзывчив, количество разделов является динамическим c, и требуется точность до пикселя. Flex очень прямолинеен в этом отношении, так как все заботится о дизайне. Я научился этому нелегко, тестируя все остальные решения неделями и исключая их одно за другим, когда возникали проблемы с блокировками. В приведенном выше примере переходы ширины будут работать без проблем, но это лишь минимальный вариант использования для демонстрации проблемы гибкости, а не мой последний сценарий, который более сложен и не очень хорошо соответствует переходам ширины (и это занижение ).

Вот почему мне нужно придерживаться гибкого перехода.

1 Ответ

2 голосов
/ 17 апреля 2020

Я изменил это transition: all 500ms;, и оно работает для моего ма c сафари. 

section {
  height: 200px;
}

.list {
  display: flex;
}

.color {
  display: flex;
  flex: 1 1 10em;
  overflow: hidden;
  transition: all 500ms;
}

.color:hover {
  flex: 1 1 40em;
}
<div class="list">

  <section class="color" style="background: red"></section>

  <section class="color" style="background: blue"></section>

  <section class="color" style="background: green"></section>

  <section class="color" style="background: yellow"></section>

  <section class="color" style="background: orange"></section>

</div>
...