Why Do My Fixed Elements Disappear in Chrome After Clicking Their Links?

Chrome's Fixed Elements Invisibility

In Chrome, fixed elements, typically used for sticky navigation bars, occasionally vanish upon clicking their links. This anomaly manifests as a partial or complete disappearance of the element, which reappears upon mouse movement or scroll.

Cause:

The exact cause is unknown, but it appears to be a WebKit issue that affects elements positioned at the top of the page (top: 0).

Solution:

To resolve this issue, add the following CSS property to the affected fixed element:

<code class="css">-webkit-transform: translateZ(0);</code>

This forces Chrome to employ hardware acceleration to render the fixed element continuously, preventing its intermittent invisibility.

Additional Information:

• The issue only affects elements with top: 0. Using bottom: 0 instead maintains expected behavior.
• This solution addresses a similar issue to the one discussed in the referenced question, but provides a functional fix.
• A bug report for this issue has been filed with Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Consider starring the bug to bring attention to this issue.

The above is the detailed content of Why Do My Fixed Elements Disappear in Chrome After Clicking Their Links?. For more information, please follow other related articles on the PHP Chinese website!