{
  "id": 11713652,
  "title": "Four CSS bugs my headless tests couldn't see",
  "url": "https://urgent.news/2026/10/03/four-css-bugs-my-headless-tests-couldnt-see",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-03T15:43:20.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ocxers/four-css-bugs-my-headless-tests-couldnt-see-54m"
  },
  "original_language": "en",
  "account": "I regularly tested the Cá Viên Chiên website using headless Playwright, scanning through screens at different widths and layout measurements. This approach caught many issues, but four bugs remained undetected. Each bug revealed a different testing gap I needed to address.\n\n1. A minifier problem caused the game's header to blur through, hiding a small button. The header had a backdrop-filter: blur(8px) property that collapsed when activated. The minifier merged this property with a non-blurred version, keeping the blurred one. Chrome ignored this filter, but Headless Chromium didn't, resulting in the blurred button. I fixed this by writing the filter property only once and added a unit test to prevent its reoccurrence.\n\n2. The button that hid behind the header was another issue. As you moved the mouse over the header, it would slide down, making it impossible to reach. The header came back into view when you moved the mouse away, causing the button to disappear and reappear. The button was under the header, so hovering the button also hovered the header. I resolved this by moving the button above the header (using z-index) and storing a data attribute to remember the header's state when the panel opened.\n\n3. Safari's fade-in animation had a flickering glitch at the end. The new scene faded in, dimmed, and then faded in again. This was caused by using both keyframes and opacity transitions on the same layer. WebKit allowed the finished fade-in to dip and repeat, while Chrome didn't. I solved this by switching to transitions only and adding a flush step to the HTML layer's opacity.\n\n4. A typo in the sauce button text was another oversight. On a 1024 px screen, the cheese label read \"mai\" instead of \"Phô mai\". The wide layout rule specified one line, but an older base rule had higher specificity and allowed two lines. At this width, the text would wrap, pushing the label behind the sauce bottle. My tests didn't catch this because they only checked for clipped labels by comparing scrollWidth to clientWidth. I added a wide-only rule with higher specificity to prevent wrapping and a new test to measure label heights against their line height, catching another case where the order card's \"Sốt mayonnaise\" was cut off.",
  "summary": "I test Cá Viên Chiên mostly with headless Playwright: walks over every screen at several widths, layout measurements, screenshots. That catches a lot. These four bugs got past all of it, and each one taught me which kind of check I was missing. 1. The minifier kept the prefix and dropped the property Symptom. On a computer, the game page's header slides away while you play. Once it was gone, the…",
  "key_points": [
    "Minifier issue caused blurred header button",
    "Header button hidden by sliding down on hover",
    "Safari fade-in animation had flickering glitch"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}