- Andrew Hagedorn
- Articles
- CSS that Kills
CSS that Kills
When Technology Bites Back
Some outages are due to complex interactions between systems in your websites. And other outages are due to human error. But sometimes outages are just stupid.
In fall 2019, we got a small number of internal user reports that interacting with a dropdown in the booking flow of the website would cause the browser to completely crash. To be clear, this was not just the given tab, the browser would just die. This extreme failure condition meant that we had no errors being logged into our systems and no real idea what the scope of the problem was.
So we ignored it...
Eventually our QA team was able to reproduce it and we eventually tracked it down to CSS on our site. This stackover flow post outlines the problem and the fix. Merely having this CSS property set caused a specific version of Safari and MacOS to completely crash when interacting with a dropdown:
.some-class {
text-rendering: optimizeLegibility;
}
An issue that was tied to a specific browser version and OS version made this virtually impossible to catch with automated testing. It also meant that even when we had an idea that something was happening reproducing it was not straight forward. And that is why the bug persisted for a month until we tracked it down.
The cherry on top? optimizeLegibility
was completely useless on our site. For a small set of fonts it will use special kerning and ligature information to improve how certain letter combinations look at small font sizes. At the time we used 3 fonts and none of them supported it. Yet a particular developer with an eye to the future decided we would be better of having it on every element.
Once we knew what we were looking for there was clear evidence in our data that for this particular slice of Safari users there were declining conversion rates over the course of the month. However, due a gentle adoption curve of the new browser by that users on that particular OS version and that it was quite small slice of our overall traffic it had no chance of ever showing up in any of our reporting.
The post mortem on this one was fun.
Other Posts
Technology
- React SSR at Scale
- TravisCI, TeamCity, and Kotlin
- The Good and the Bad of Cypress
- Scaling Browser Interaction Tests
- Exploring Github Actions
- Scope and Impact
- Microservices: Back to the Future