👀 Views: 47 💬 Answers: 1 📅 Created: 2025-06-05

css flexbox transitions

I need some guidance on I'm working on a project and hit a roadblock. I'm experiencing an scenario with CSS transitions not being triggered on hover for a pseudo-element (`::after`) within a flexbox layout in Chrome. The pseudo-element is supposed to change its opacity when the parent element is hovered over, but it seems to work intermittently. Here’s the relevant CSS I’m using: ```css .container { display: flex; width: 100%; height: 200px; justify-content: center; align-items: center; position: relative; } .box { width: 100px; height: 100px; background-color: #3498db; position: relative; overflow: hidden; } .box::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); opacity: 0; transition: opacity 0.5s; } .box:hover::after { opacity: 1; } ``` When I hover over the `.box`, the pseudo-element does transition to an opacity of `1`, but sometimes it fails to show the transition effect smoothly, especially after rapid hovers. The flickering seems to happen when I move the mouse quickly in and out of the box. I’ve tested this in Chrome version 116.0.5845.97, and it works as expected in Firefox. I've also tried adding `will-change: opacity;` to the `.box::after`, but that didn't resolve the scenario. Has anyone else experienced this inconsistency with Chrome and flexbox? Are there any workarounds or fixes for this behavior? My development environment is macOS. Thanks in advance! I'm on macOS using the latest version of Css. Any feedback is welcome!