通过 Heroku 部署时 CSS 在 Safari 上中断，但在本地运行完美？

Question

所以我目前在 Heroku 上部署了一个 Rails 应用程序。在生产和本地通过 Chrome 查看时，CSS 样式完美无缺。然而，使用桌面 Safari，在生产服务器上查看时，样式似乎完全中断。奇怪的是，在本地运行 Rails 应用程序时，Safari 可以很好地呈现页面。 Mobile Safari 还在生产环境中正确呈现页面。

您可以 view the page here.

最初我认为 Heroku 可能没有正确提供 Assets ，但页面在 Chrome 上按预期呈现的事实应该意味着它工作正常。

在 Safari 上进行测试，当窗口尺寸缩小到移动设备时，页面会正确呈现，因此 Assets /图像/CSS 肯定会加载 - 只是当视口(viewport)为桌面窗口大小时不会加载。

有没有人猜到发生了什么事？

Answer 1

我刚刚遇到了类似的问题。 我想这不是 Heroku 相关的问题。 在我的例子中，Safari 不喜欢 css 代码:

@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 文件已完全加载，但该代码之后的所有样式都完全损坏且未应用。 @media 后的新行 - 问题的原因。