Why Does My Fixed Position Anchor Disappear in Chrome and Opera When Clicking UL Links?

Chrome and Opera Rendering Issue: Fixed Position Anchor with UL in Body

In certain browsers such as Chrome and Opera, a peculiar rendering issue can arise when attempting to position a fixed element alongside a UL tag. This issue manifests as the fixed element disappearing momentarily upon clicking anchor links.

Root Cause

The underlying cause of this issue is attributed to the way these browsers handle repaints when elements on the page are updated. Specifically, the fixed element may lose its positioning temporarily during the repainting process.

Chrome Solution

To resolve this issue in Chrome, you can apply a translateZ(0) transform to the problematic fixed element. This action effectively triggers a 3D transformation, isolating the repaint process from the rest of the CSS stack, thus alleviating the positioning issue.

#sidebar {
    -webkit-transform: translateZ(0);
}

Opera Solution

For Opera, a slightly different approach is required. In this case, you can create a CSS animation that continuously repaints a property that affects layout but doesn't impact the visual appearance of the element, such as margin-bottom. This approach fools Opera into performing continuous repaints, ensuring the fixed element maintains its positioning.

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

Note

It's important to note that this solution may not be foolproof and might result in a slight flicker as Opera attempts to regain the fixed positioning. This limitation is inherent to the way Opera handles repainting processes, making it difficult to entirely eliminate the visual artifact.

The above is the detailed content of Why Does My Fixed Position Anchor Disappear in Chrome and Opera When Clicking UL Links?. For more information, please follow other related articles on the PHP Chinese website!