Фиксированная позиция не работает в Safari 7

у меня есть фиксированная позиция div, которая сидит в нижней части экрана, когда я прокручиваю, не двигаясь. Однако в Safari этот div действует так, как будто он абсолютно позиционирован и перемещается вверх и вниз с остальной частью контента. Когда я нажимаю "проверить элемент", программируемое (желаемое) местоположение подсвечивается, а не визуальное (фактическое?) расположение.

Я не могу воссоздать эту проблему в скрипку. Это не происходит в Chrome, FF или IE (10+).

вот скриншот разница между визуальным (поле подсчета символов) и запрограммированным местоположением (выделенная область).

Screenshot of phantom div

поверх них есть более актуальные слои css и html, но вот непосредственный код:

HTML-код упрощенный

<article class="parent">
  <article class="inner-wrapper">
    <div id="counter">
      Character Count: <span class="tally">*javascript calculation*</span>
    </div>
  </article>
</article>

scss

article.parent {
  max-width: rem(640);
  margin: 0 auto rem(30) auto;
  padding: 0 rem(10);

 #counter {
   position: fixed;
   border: #888 solid 1px;
   bottom: 130px;
   left: 10px;
   border-radius: 5px;
   padding: 10px;
   background: rgba(255, 255, 255, .8);
   font-size: .8em;
   min-width: 150px;
 }

}

Как я могу заставить этот div вести себя в Safari, так что визуальный сидит поверх запрограммированного местоположения?

6
css safari safari7

2 ответов

ОШИБКА НАЙДЕНА:

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

transform: translateZ(0)
perspective: 1000

удалив эти два правила, элемент теперь ведет себя так, как ожидалось. Более подробная информация об этом вопросе здесь:производительность CSS относительно translateZ (0)

Бонус Исправление Ошибок: удаление этих правил в теле HTML вызвало различные проблемы перекрытия элементов в нашем Тесты PhantomJS / Poltergeist. По-видимому, PhantomJS не перемещает элементы должным образом самостоятельно. Мы включили эти правила только для испытаний и в настоящее время все работает нормально.

ОРИГИНАЛЬНОЕ РЕШЕНИЕ:

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

<article class="parent">
  <article class="inner-wrapper">
    ...
  </article>
  <div id="counter">
    Character Count: <span class="tally">*javascript calculation*</span>
  </div>
</article>
5

попробуйте эту скрипку

http://jsfiddle.net/sosypjLg/1/

#counter {
position: fixed;
bottom: 0;
width: 100%;
}

вам нужен этот стиль CSS

-1