Exploring the realm of pure CSS carousels for an academic exercise led me to the implementation detailed on CSS Tricks, which employs several modern CSS properties like anchor-name, position-anchor, and position-area. At the time of this writing, these experimental features primarily function in Chrome.

While many of these properties were new to me, these three were particularly relevant to my project. My natural inclination as a QA engineer prompted me to test the carousel with multiple instances on a single page. This is where the functionality broke down.

It quickly became apparent that anchor-name functions akin to an HTML ID, meaning only one instance should exist per page. However, unlike an ID, anchor-name is defined in the CSS. Consequently, when multiple identical anchor-name values are present, the browser, much like with invalid HTML, recognizes only the last one defined.

My initial thought for resolving the positioning of the ::scroll-button elements within the carousel’s DOM (where aria-roledescription="carousel") was to apply position: relative to the parent and position: absolute to the buttons. However, this approach unexpectedly failed to yield the desired outcome.

After some extensive debugging and even consulting AI tools like Cursor, which, incidentally, pointed towards various CSS techniques for replicating positioning without true absolute positioning, I found myself perplexed by what seemed like a trivial problem. The buttons were clearly present in the DOM, so their correct rendering should have been straightforward.

Then, a memory of an old colleague’s comment about my knack for “doing interesting things with old technology” struck me. Discarding the modern, bleeding-edge CSS, I reverted to a simpler, time-tested method: floating the right button. This surprisingly effective workaround immediately resolved the issue.

It’s conceivable that this discrepancy between the DOM structure and the layout engine’s behavior points to a bug within Chrome’s rendering engine, a common occurrence with such cutting-edge and experimental features.