Автор столкнулся с досадным CSS-багом при разработке навигационного оверлея для своего личного портфолио. Проблема заключалась в желаемом типографическом эффекте переворота, при котором темный слой должен был закрывать белый текст при наведении. Это требовало обрезки поднимающегося темного слоя и входящего темного текста внутри контейнеров ссылок.Несмотря на то, что CSS выглядел корректно, а логика была здравой, свойство overflow: hidden не давало ожидаемого эффекта обрезки. Автор применил шесть различных подходов для исправления этой проблемы, включая применение overflow: hidden к различным элементам, корректировку высоты контейнеров и даже использование clip-path и инлайновых стилей. Ни одна из этих попыток не решила проблему, и никаких ошибок в консоли не появилось.Первопричиной бага стало тонкое взаимодействие, определенное в спецификации CSS. overflow: hidden создает контекст форматирования блока (Block Formatting Context), который устанавливает независимую среду макета. Однако контекст форматирования блока не может быть создан для элементов, которые являются потомками предка с position: fixed. Поскольку навигационный оверлей имел position: fixed, overflow: hidden на дочерних обертках ссылок не обрезал контент должным образом.Этот конкретный крайний случай overflow: hidden редко документируется или встречается. Поведение браузера было корректным согласно спецификации, но оно отличалось от интуиции разработчика. Решением было использовать вместо этого overflow: clip.overflow: clip — это более точный механизм обрезки, который визуально обрезает контент, не создавая контекст форматирования блока. Это позволяет обойти конфликт с предком position: fixed, позволяя обрезке работать правильно. Автор подчеркивает, что, хотя overflow: clip и overflow: hidden выглядят одинаково, когда они работают, overflow: clip является подходящим инструментом для обрезки внутри контейнеров с position: fixed. Это открытие было ценным, поскольку оно устранило баг, который не проявлялся видимыми ошибками или очевидными несоответствиями браузеров.