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