Safari Inspector CSS 媒体查询选择器显示为 [object Object]答案

【问题标题】：Safari Inspector CSS Media Query Selectors Show as [object Object]Safari Inspector CSS 媒体查询选择器显示为 [object Object]
【发布时间】：2015-12-14 20:17:06
【问题描述】：

正如标题所说，媒体查询中的所有 CSS 选择器在检查器中都显示为 [object Object]。有没有其他人遇到过这个？有谁知道我如何强制它显示正在使用的实际选择器？截图如下：

【问题讨论】：

标签： safari media-queries inspector

【解决方案1】：

这里也一样。所有选择器。在 iPhone 6+、iOS 9.0.1 上的 Cordova 中运行 webview。使用 Stylus 生成的样式表。在 OSX Safari 中运行相同的 css 和 html 效果很好。

更新——由 Safari 9.0 修复

【讨论】：

确实，这似乎已在 Safari 9.0 中得到修复。总的来说，这是对检查器的一个非常好的更新。

【解决方案2】：

我们在使用 LESS HAT 的 keyframes mixin 时遇到了类似的问题。在 iOS9 上使用移动 Safari 时，CSS 选择器在 Web 检查器中显示为 [object Object]。

LESS CSS with LESS HAT 生成的样式表在 iOS / Safari 更新后停止工作。 LESS HAT 的 GitHub Issue #156 地址和 Pull Request #157 修复了这些问题。

如果您没有使用 LESS HAT 等，则可能只是 CSS 规则有问题。在我们的例子中，Safari 的控制台显示了一个警告：Invalid CSS property declaration […]

【讨论】：

是的，我过去曾处理过类似的问题，由 scss mixins 引起，但这次是纯 css。我已经通过 linter 运行了我的 css 文件，但没有看到任何语法错误，现在这发生在多个站点上。
我也遇到了这个问题，尽管在我的情况下，所有选择器都会发生这种情况，而不仅仅是媒体查询中的选择器。我有 0 个控制台错误和警告。这显然使调试变得相当困难。我正在运行 iOS 9.0.1 FWIW。
我不确定它是否变得更糟，或者我最初是否没有看到问题的全部范围，但它绝对不再只是发生在我的媒体查询上。在我的一个网站上，css 似乎一直到第 75 行都失败了，但随后第 82 行的下一个样式正在正确读取……早先的行被破坏而后来的行正在工作的事实确实很奇怪。