Фиксированный элемент исчезает в Chrome
При прокрутке на веб-сайте, который я создал, использование свойства CSS position: fixed работает так, как ожидается, чтобы панель навигации была на самой верхней части страницы.
В Chrome, однако, если вы используете ссылки в навигационной панели, это иногда исчезает. Обычно элемент, на который вы нажали, по-прежнему отображается, но не всегда. Иногда все исчезает. Перемещение мыши вокруг возвращает часть элемента, а прокрутка с помощью колесика прокрутки или клавиш со стрелками только одним щелчком возвращает элемент назад. Вы можете видеть, как это происходит (с интервалом) на http://nikeplusphp.org - вам может потребоваться несколько раз щелкнуть по ссылкам на ссылки см. это произойдет.
Я также пробовал играть с z-index и видом/отображением, но не повезло.
Я столкнулся с этим вопросом, но исправление не работало для меня вообще. Кажется, это проблема webkit, поскольку IE и Firefox работают нормально.
Является ли это известной проблемой или существует ли исправление, позволяющее фиксировать фиксированные элементы?
Update:
Только элементы эффектов, имеющие top: 0;, я пробовал bottom: 0; и работает как ожидалось.
Ответы
Ответ 1
Это проблема webkit, которая еще предстоит решить, странно делая переход с помощью JavaScript, а не используя значение URL-адреса #, не вызывает проблемы. Чтобы решить эту проблему, я предоставил версию JavaScript, которая принимает значение привязки и находит абсолютное положение элемента с этим идентификатором и переходит к такому:
var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
elements[i].onclick = function() {
var hash = this.hash.substr(1),
elementTop = document.getElementById(hash).offsetTop;
window.scrollTo(0, elementTop + 125);
window.location.hash = '';
return false;
}
}
Я мог бы уточнить это дальше и сделать так, что он ищет только ссылки, начинающиеся с тега #, а не тега a, который он находит.
Ответ 2
Добавьте -webkit-transform: translateZ(0) в элемент position: fixed. Это заставляет Chrome использовать аппаратное ускорение, чтобы непрерывно рисовать фиксированный элемент и избегать этого причудливого поведения.
Я создал ошибку Chrome для этого https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Пожалуйста, запустите его, чтобы это привлекло некоторое внимание.
Ответ 3
Это исправляет это для меня:
html, body {height:100%;overflow:auto}
Ответ 4
У меня была такая же проблема с Chrome, она кажется ошибкой, которая возникает, когда внутри страницы слишком много происходит, я смог ее исправить, добавив следующий код преобразования в элемент фиксированной позиции ( transform: translateZ(0);-webkit-transform: translateZ(0);), что заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору устройств (GPU), чтобы заставить пикселы летать. С другой стороны, веб-приложения запускаются в контексте браузера, что позволяет программному обеспечению выполнять большинство (если не все) рендеринга, что приводит к меньшей мощности для переходов. Но Интернет догоняет, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.
Использование -webkit-transform: translate3d (0,0,0); будет вызывать GPU в действие для переходов CSS, делая их более плавными (более высокий FPS).
Примечание: translate3d (0,0,0) ничего не делает с точки зрения того, что вы видите. он перемещает объект на 0px по оси x, y и z. Это всего лишь способ принудительного аппаратного ускорения.
#element {
position: fixed;
background: white;
border-bottom: 2px solid #eaeaea;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
height: 80px;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
Ответ 5
Параметры выше не работали для меня, пока я не смешал два из предоставленных решений.
Добавив следующее к фиксированному элементу, он сработал. Мне также нужен z-индекс:
-webkit-transform: translateZ(0);
z-index: 1000;
Ответ 6
Полное решение/Все браузеры
HTML CODE
<body>
<div class="wrapper">
<div class="static">
<div class="header">
</div>
</div>
<div class="content">
</div>
</div>
</body>
CSS STYLE
body
{
background: #000000;
margin: 0px auto auto auto;
padding: 0px;
max-width: 830px;
height:100%;
overflow:auto;
}
.wrapper
{
margin: 0px auto;
height: 89%;
width: 830px;
}
.static
{
width: 815px;
z-index: 2;
height: 145px;
position: fixed;
padding-left: 0px;
margin: auto;
}
.content
{
width: 820px;
float: left;
position: relative;
top: 125px;
margin: auto;
padding-top: 25px;
}
.header
{
height: 150px;
width: 820px;
margin-left: auto;
margin-right: auto;
margin-top: -2px;
padding: 5px;
overflow:auto;
}
Ответ 7
Если ни один из приведенных выше ответов не сработал для вас, убедитесь, что вы не являетесь манекеном, как я, и установите переполнение: hidden; на фиксированный элемент: (
Ответ 8
Что, если никто из вышеперечисленных не работал вообще? простой случай с липким заголовком + мобильное боковое меню, толкающее содержимое.
Я пытаюсь найти способ избежать перевода фиксированного элемента (липкого заголовка), но в этом случае ничто не является хорошей альтернативой.
Так как нет обходного пути для области действия до сих пор существует альтернатива JS, которую я выбрал для пересчета абсолютной позиции фиксированного элемента. См. Здесь: fooobar.com/questions/12066/...
Ответ 9
Я столкнулся с той же проблемой в другом случае. Это было связано с использованием одного и того же идентификатора в нескольких местах. Например, я использовал #full 2 divs.
Кажется, что мозилла и И.Е. поддерживает использование одного и того же идентификатора в нескольких случаях. Но хром не делает. В моем случае он реагировал с исчезновением фиксированного элемента.
Просто удаление id решило проблему.
Ответ 10
Если он не работает после добавления
-webkit-transform: translateZ (0)
чем добавить
нет пользователя масштабируемым = нет
в окне просмотра мета
источник здесь
это сработало для меня
