If your code doesn't use lesshat.less, then this won't pertain to your issue probably. In my work on https://draftorpass.com, I had an issue with CSS rendering on our lobby page in the newest version of OS X and iOS. The problem only showed itself in Safari. Safari was reporting various issues with parts of the CSS, but none of that was even related to the issue. After four hours of trying various things, I decided to run our main CSS file through csslint.net. The very first error lead me straight to the root of the issue. There was an unexpected semi-colon.

Safari is way more picky than most other major browsers. Chrome, IE, and Firefox all just ignored this issue. I'm not sure how much I like this strict behavior of Safari. In the last couple of months it has caused me two issues that were hard to track down. I remember a few years ago, IE was the browser that seemed hard to get right. Now it seems that Safari is the biggest nuisance.

Front-end development is something I really try to avoid as much as possible because of these type of issues. The frond-end designer which originated this problem hasn't been working on the project in over a year. It's not really his fault. However, his use of one function from the lesshat library is what caused our site to break on all new Safari browsers. It jacked up all of the CSS just because the function added a semi-colon where it shouldn't have. I would blame the lesshat library itself, but I mainly blame Safari. Being strict about things is great usually, but not when it breaks most of the CSS on a page.

The fix? Just don't use the lesshat keyframes function in any of your less files. Avoid it if you want your site to work in Safari.

Now I'm off to see if I can create a better fix to submit to them.