Фиксированный элемент исчезает в Chrome

Question

Фиксированный элемент исчезает в Chrome

при прокрутке на веб-сайте, который я построил, используя свойство CSS position: fixed работает так, как ожидается, чтобы сохранить панель навигации в самой верхней части страницы.

В Chrome, однако, если вы используете ссылки в панели навигации это иногда исчезает. Обычно элемент, на который вы нажали, все еще виден, но не всегда. Иногда все это исчезает. Перемещение мыши вокруг возвращает часть элемента, а прокрутка с помощью колеса прокрутки или клавиш со стрелками просто один клик возвращает элемент обратно. Вы можете видеть, как это происходит (с перерывами) на http://nikeplusphp.org - Возможно, вам придется нажать на несколько навигационных ссылок несколько раз, чтобы увидеть, как это происходит.

Я также пробовал играть с Z-индексом и типом видимости/отображения, но не повезло.

я столкнулся с этим вопросом, но исправление не сработало для меня вообще. Кажется, это проблема webkit, так как IE и Firefox работают просто отлично.

это известно проблема или есть исправление, чтобы фиксированные элементы были видны?

обновление:

только эффекты элементы top: 0;, Я пробовал bottom: 0; и это работает, как ожидалось.

875 11

css webkit position

11 ответов:

Comments

Ничего не найдено.

TJ VanToll · Accepted Answer · 2017-09-10 17:54:38

добавить -webkit-transform: translateZ(0) до position: fixed элемент. Это заставляет Chrome использовать аппаратное ускорение, чтобы непрерывно рисовать фиксированный элемент и избегать этого странного поведения.

Я создал Chrome ошибка для этого https://bugs.chromium.org/p/chromium/issues/detail?id=288747. пожалуйста, звезда его, так что это может получить некоторое внимание.

Cooper · Accepted Answer · 2013-01-28 21:34:52

это исправляет его для меня:
html, body {height:100%;overflow:auto}

Neo · Accepted Answer · 2014-09-18 23:45:54

у меня была та же проблема с Chrome, похоже, это ошибка, которая возникает, когда слишком много происходит внутри страницы, я смог ее исправить, добавив следующий код преобразования в элемент фиксированной позиции, (transform: translateZ(0);-webkit-transform: translateZ(0);), что заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору устройства (GPU), чтобы заставить пиксели летать. Веб-приложения, с другой стороны, работают в контексте браузера, что позволяет программному обеспечению выполнять большую часть (если не все) рендеринга, в результате меньше лошадиных сил для переходов. Но интернет догоняет, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.

Using-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);
}

cortopy · Accepted Answer · 2015-03-17 02:20:18

приведенные выше варианты не работали для меня, пока я не смешал два из представленных решений.

добавив следующее к фиксированному элементу, это сработало. В основном z-индекс также был необходим для меня:
-webkit-transform: translateZ(0);
z-index: 1000;

cchana · Accepted Answer · 2014-01-02 10:45:44

это проблема 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 пометить его находки.

Ritesh Jung Thapa · Accepted Answer · 2017-02-06 19:15:33

Я столкнулся с такой же проблемой в другом случае. Это было из-за использования одного и того же идентификатора в нескольких местах. Например, я использовал #full 2 divs.

кажется, что mozilla и т. е. поддерживает использование одного и того же идентификатора в нескольких случаях. Но хром этого не делает. Он реагировал с фиксированным элементом неодобрения в моем случае.

просто удаление идентификатора решило проблему.

GentiElezaj · Accepted Answer · 2017-10-05 01:55:00

Если он не работает после добавления

- webkit-transform: translateZ (0)

чем еще добавить

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

на видовом экране мета

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

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

maslan · Accepted Answer · 2018-04-20 00:03:40

ни один из них не работал для меня, кроме вызова модального через javascript
<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>
кроме этого, ни одно из решений выше не решило мою проблему.

Angelika Johansson · Accepted Answer · 2016-07-18 12:44:39

Если ни один из ответов выше не работал для вас, убедитесь, что вы не манекен, как я и есть переполнение: скрытый; установить на фиксированный элемент :(

antoni · Accepted Answer · 2017-05-23 14:47:07

Что делать, если ни один из выше работал вообще? простой случай липкого заголовка + мобильного бокового меню, нажимающего контент.

Я пытаюсь найти способ избежать перевода фиксированного элемента (липкого заголовка), но в этом случае ничто не является хорошей альтернативой.

Так как нет обходного пути по области до сих пор существует альтернатива JS, которую я выбрал для пересчета абсолютного положения фиксированного элемента. Смотрите здесь: https://stackoverflow.com/a/21487975/2012407

kumar chandraketu · Accepted Answer · 2018-05-02 18:25:23

это сработало для меня . Добавить Overflow свойство для вашего самого верхнего контейнера, который может быть Div или формой и т. д.
div, form
{
  overflow:visible;    
}