Here’s a weird CSS anomaly that you might have missed – Martijn Cuppens, a software engineer, has created a div that looks different on every browser.
Cuppens shared his creation on CodePen – you can see the code for yourself here.
Here’s what they look like on different browsers:
The div that looks different in every browser https://t.co/hXmxoLA8fW pic.twitter.com/DTyOKxjhSG
— Martijn Cuppens (@Martijn_Cuppens) July 6, 2018
Note: If you’re looking on an iPhone the differences won’t appear as all browsers on the iPhone are essentially the same – app store restrictions mean they use the same rendering engine.
According to Cuppens, the most ‘correct’ version is Edge. He explains that he came across the discovery by saying that he “wanted to know if there is a way to inset outlines… turned out ‘inset’ was a outline-style and a negative outline-offset can be used to inset outlines.”
I wanted to know if there is a way to inset outlines (like box-shadow). Turned out 'inset' was a outline-style and a negative outline-offset can be used to inset outlines. The combination of these properties led to this result.
— Martijn Cuppens (@Martijn_Cuppens) July 7, 2018
What Cuppens experiment shows is how widely browsers can vary in their interpretation of CSS. On Twitter, users responded with their own versions, like this:
This is fun. Here's one more. Still a single div, same styling, wildly different results.https://t.co/XKvFGoEpUw pic.twitter.com/tba1gTpGF4
— Florian (@frivoal) July 7, 2018
Others, meanwhile, were happy to offer droll responses to the challenges and occasional woes of working with CSS…
— Reza Shirazian (@kingreza) July 6, 2018
Read next
Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more
