Фиксированный элемент исчезает в 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)

чем добавить

нет
пользователя масштабируемым = нет

в окне просмотра мета

источник здесь

это сработало для меня