Today I encountered a strange bug in a regular html form.
Some users reported that they weren’t able to choose items from a <select> (drop-down) list.
Active (broken) select dropdown – Safari 4.0
After some investigation (using the really good live-tool from Browserstack) I found out that the bug was isolated to old Safari versions. Strangely enough I couldn’t reproduce the bug in my development enviroment.
Some searching later I found out that someone had a similar bug, and that it was related to the @font-face css property (which we use in <select> lists). That made sense to me since the fonts loaded with @font-face doesn’t work in the development enviroment (we’re using fonts.com). I tried to remove fonts using font-face from the select/option fields and it worked!
Lesson learned: Don’t use @font-face on selects in old Safari versions.
The solution we’re using at the moment is simply not to have @font-face on <select> lists – it’s not optimal and it will probably change later with a JS / Serverside browser-detection implementation.