Странная проблема растягивания CSS в Safari iOS7 и Chrome

После обновления до iOS 7 на нескольких iPhone и iPad мы наблюдали нечто странное с частью пользовательского интерфейса на нашем веб-сайте.

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

По какой-то причине браузер периодически растягивает розовый div, но я не могу придумать ничего, что могло бы его вызвать - и я бы не знал, как добиться этого эффекта, если бы захотел!

Я предполагаю, что это ошибка в браузере (ах), но я не знаю, как это исправить.

Я не включил ни одного кода, поскольку все это действительно очень просто, и там нет ничего, что могло бы вызвать это (и это действительно работает в iOS6). Просто надеяться, что кто-то видел это раньше?

Есть идеи?

Обновление В ответ на комментарий cimmamon здесь код:

<div class="col" style="left: -3920px; width: 280px;">
<div class="periods">
    <div class="period3"></div>
    <div class="period2"></div>
    <div class="period1"></div>
    <div class="nodeline colBk">
        <div class="node colBrd"></div>
    </div>
</div>
<div class="inner">
    <div class="group first">
        <div class="branch colBk"></div>
        <a class="story">
            <div class="strip colBk"></div>
            <div class="caption">
                <div class="text">
                    <p class="title">Test</p>
                </div>
            </div>
        </a>
    </div>
</div>

И CSS, который применяется к контейнеру 'period' и дочерним элементам:

.tls .col { display: inline-block; position: absolute; top: 0; }
.periods { height: 72px; overflow:hidden; position: relative; border-left: 1px solid #fff; }
.period2 { height: 30px; opacity: 0.6; background-color: #fff; position: absolute; width: 100%; }
.period1 { height: 25px; opacity: 0.72; top: 30px; background-color: #fff; position: absolute; width: 100%; }
.nodeline { height: 61px; }
.colBk { background-color: #dd545c; }
.nodeline { height: 61px; }
.node { position: absolute; margin-left: -15px; left: 50%; bottom: 0px; width: 17px; height: 17px; border-radius: 50%; border: 6px solid #dd545c; background-color: #f9f9f9; }
.colBrd { border-color: #dd545c; }

Это такая странная ошибка - в CSS нет ничего, что могло бы вызвать это, что я вижу.

Любые предложения о том, что CSS я мог бы добавить, что может заставить его правильно отображаться? Можно подумать, что одной высоты будет достаточно, но, очевидно, нет.

Скрипка здесь

Ответ 1

У меня была эта проблема, и она также появилась в Safari 7.

Здесь упрощенная версия того, что происходило в моем случае

HTML

<ul>
  <li>
    <a> Some text </a>
  </li>
  <li>
    <a> Some  other text </a>
  </li>
</ul>

У меня тогда был javascript (в моем случае всплывающая подсказка), которая добавлялась в элемент, который сделал html

<ul>
  <li>
    <a> Some text </a>
    <div style="position: absolute" class="tooltip"> Some content here </div>
  </li>
  <li>
    <a> Some  other text </a>
  </li>
</ul>

Новый div был кратковременно отображен до того, как весь ul будет растянут поверх вершины нового div.

Это должно быть ошибкой в сафари, но добавление следующего CSS в вставленный div работает как обходной путь.

.tooltip {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

Это заставляет вставленный div быть рендерингом в новом составном слое, который, по-видимому, препятствует запутыванию Safari.

Надеюсь, этого достаточно, чтобы вы могли найти решение, но дайте мне знать, если нет, и я могу ответить на этот ответ немного больше.

Ответ 2

Попробуйте использовать backface-visibility:

-webkit-backface-visibility:hidden;

это заставило мои заголовки растягиваться, когда-то удаленный мир был и является более счастливым местом

протестирован на iOS 6 и iOS 7 и Android 4.2 +

Ответ 3

Еще одно очевидное обходное решение, которое позволяет избежать создания дополнительных слоев композиций, заключается в добавлении perspective к элементам, которые находятся в контексте с графическим интерфейсом. (В этом случае элементы с opacity.) Обратите внимание, что если вы позиционируете вещи в 3D-пространстве с помощью translate3d, это будет иметь визуальное воздействие и не может быть эффективным обходным путем.

.period1, .period2, .period3 {
  -webkit-perspective: 1px;
  perspective: 1px;
}

Ответ 4

возможно, это устраняет проблему:

добавить высоту: 17px;.node, поэтому ваш css должен выглядеть как

.node {
    background-color: #F9F9F9;
    border: 6px solid #DD545C;
    border-radius: 50% 50% 50% 50%;
    bottom: 0;
    height: 17px; /*new*/
    left: 50%;
    margin-left: -15px;
    position: absolute;
    width: 17px;
}

jsFiddle