Why do fixed position divs with UL tags disappear in Chrome and Opera?

Chrome and Opera Rendering Issue with Fixed Position and UL Tag

Certain configurations in HTML code can cause rendering issues in Google Chrome and Opera. When a fixed position div includes a < UL > tag, the div can intermittently disappear upon clicking anchor links. This problem arises due to an internal issue within Chrome's rendering engine.

Chrome Solution

In Chrome, the issue can be resolved by adding -webkit-transform: translateZ(0) to the CSS style for the fixed position div:

#sidebar {
  -webkit-transform: translateZ(0); /* Fix for Chrome rendering issue */
}

This technique forces Chrome to perform a 3D transformation on the div, which appears to address the underlying rendering problem.

Opera Solution

Opera's handling of the issue differs from Chrome's. To resolve the problem in Opera, requires continuously forcing repaints on a property that can potentially affect layout, but in practice has no impact. In this case, margin-bottom is used as it is unlikely to interfere with the page layout:

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

#sidebar {
  animation: noop 1s infinite;
}

This code ensures Opera continuously repaints the sidebar's margin-bottom, forcing it to maintain its fixed position. While this solution is not entirely flawless, it minimizes the flicker and restores the intended behavior.

It is important to note that the Opera solution is not a universal fix and may require adjustments based on the specific positioning requirements of the element in question. If you encounter this issue, try modifying the suggested CSS to suit your needs.

The above is the detailed content of Why do fixed position divs with UL tags disappear in Chrome and Opera?. For more information, please follow other related articles on the PHP Chinese website!