Элемент с фиксированной позицией фактически не фиксируется в Chrome

Question

Элемент с фиксированной позицией фактически не фиксируется в Chrome

0

Chrome начал делать что-то очень странное с элементом фиксированной позиции. В принципе, он все еще прокручивается со страницей, даже если он установлен как фиксированный. Проще всего было бы просто объяснить, связавшись с живым сайтом.

http://new.safetylineloneworker.com/?page_id=9

Если вы посмотрите на него в firefox или в аду, даже IE, текст "Блок 1 Блок 2 Блок 3" действует так же, как и должно, придерживаясь вершины экрана, как только вы прокрутите его туда, пока не нажмете "точку выпуска" дальше вниз.

Посмотрите на него в Chrome, и он не только переместится на свое фиксированное положение раньше, чем должен, но и просто... свитки, хотя он явно настроен на фиксированную позицию. Это действительно одна из самых причудливых вещей, которые я когда-либо видел.

Kyle S 25 окт. 2013, в 01:30

Источник

0

Я не вижу "Блок 1, Блок 2, Блок 3" на вашей странице, и некоторые ресурсы изображения, кажется, 404ing.
Josh KG 24 окт. 2013, в 23:33
0

какой элемент на вашей странице имеет положение: исправлено?
Danield 24 окт. 2013, в 23:40

Теги:

javascript

html

css

2 ответа

0

Это похоже на ошибку в Chrome (и Safari, но Chrome в этом вопросе).

Я не нашел открытой проблемы для этой ошибки; вы должны представить отчет по хромированным вопросам.

Tyler Eich 24 окт. 2013, в 21:21

Ещё вопросы

Я не вижу "Блок 1, Блок 2, Блок 3" на вашей странице, и некоторые ресурсы изображения, кажется, 404ing.
какой элемент на вашей странице имеет положение: исправлено?

Danield · Accepted Answer · 2013-10-24T22-46-00.000Z

Я заметил, что вы используете трансформации. Это то, что вызывает проблему.

Взгляните на спецификацию: модель рендеринга трансформирования

Указание значения, отличного от "none" для свойства transform, устанавливает новую локальную систему координат в элементе, к которому она применяется.

Таким образом, элемент с фиксированным позиционированием будет относиться к элементу с преобразованием, а не к окну просмотра

Посмотрите на этот FIDDLE в браузере webkit, чтобы увидеть это в действии

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}