通过Heroku部署时，CSS在Safari上中断，但在本地运行良好吗？

Question

So I have a Rails app currently deployed on Heroku. The CSS styling works perfectly when viewed via Chrome on both production and locally. However, using desktop Safari the styling seems to completely break when viewed on the production server. The strange thing is that Safari renders the page just fine when running the Rails app locally. Mobile Safari also renders the page correctly on production.

You can view the page here.

Initially I thought that maybe the assets weren't being served correctly by Heroku, but the fact that the page renders as its supposed to on Chrome should mean that it's working fine.

Testing on Safari, the page renders correctly when the window is resized down to mobile, so the assets/images/css are definitely loading - just not when the viewport is the size of a desktop window.

Does anyone have a guess as to what's going on?

Answer 1

I just have got similar problem. I suppose it's not Heroku related issue. In my case Safari did not like css code:

@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
  -webkit-font-smoothing: subpixel-antialiased;
}

Css file loaded fully but the all styles after that code completely broken and did not applied. New line after @media - the cause of the problem.