The author encountered a frustrating CSS bug while developing a navigation overlay for their personal portfolio. The issue involved a desired typographic flip effect where a dark layer would cover white text on hover. This required clipping the rising dark layer and incoming dark text within link containers.Despite the CSS appearing correct and the logic sound, the overflow: hidden property failed to produce the expected clipping. The author implemented six different approaches to fix this, including applying overflow: hidden to various elements, adjusting container heights, and even using clip-path and inline styles. None of these attempts resolved the problem, and no console errors appeared.The root cause of the bug was a subtle interaction defined in the CSS specification. overflow: hidden creates a Block Formatting Context, which establishes an independent layout environment. However, a Block Formatting Context cannot be created for elements that are descendants of an ancestor with position: fixed. Since the navigation overlay had position: fixed, the overflow: hidden on the child link wrappers failed to clip content as intended.This specific edge case of overflow: hidden is rarely documented or encountered. The browser behavior was correct according to the specification, but it deviated from developer intuition. The solution was to use overflow: clip instead.overflow: clip is a more precise clipping mechanism that visually clips content without creating a Block Formatting Context. This bypasses the conflict with the position: fixed ancestor, allowing the clipping to function correctly. The author highlights that while overflow: clip and overflow: hidden look the same when they work, overflow: clip is the appropriate tool for clipping within position: fixed containers. This discovery was valuable because it addressed a bug that presented no visible errors or obvious browser inconsistencies.