适用于 iOS 的 Chrome 中的聚合物 - 它不工作，对吧？答案

【问题标题】：Polymer in Chrome for iOS - it is not working, right?适用于 iOS 的 Chrome 中的聚合物 - 它不工作，对吧？
【发布时间】：2014-12-15 10:59:08
【问题描述】：

我对 Polymer 感到非常兴奋并开始开发网络应用程序。我很快发现 Firefox 无法正确加载网站，详情请参阅此 SO 帖子：

Polymer: Layout screwed up in Firefox, fine in Chrome

然后，我在 iPhone 4 (iOS7) 和 iPhone 6 (iOS8) 上下载了最新版本的 Chrome 并尝试了该网站。我看到的错误与在 Firefix 上看到的相同（请参阅上面的链接）。

换句话说 - 使用 Chrome for iOS 访问我的基于 Polymer 的网站失败与 Firefox 失败一样糟糕。

所以，我想确认一下：Polymer 在 iOS 上不工作（Safari 不支持，iOS 版 Chrome 不支持）。正确吗？

正如我在上面链接的其他 SO 问题中也指出的那样，由于“polyfill”，我希望它可以在所有浏览器中工作，但这似乎没有帮助。

我错过了什么吗？ =)

注意：使用 Android 版 Chrome 可以正常工作，没有错误。

【问题讨论】：

应该可以工作，polyfill 工作得很好。检查 polyfill 文档，完全支持 Firefox（原则上），所以先尝试让它在 Firefox 中工作（使用控制台调试），然后再次检查:)
谢谢，我一直在努力，但老实说我能弄清楚。该站点非常简单，即使是最基本的形式，Polyfill (ShadowDOM) 也无法正常工作。我已经用我做的测试更新了 SO 问题：stackoverflow.com/questions/27480345/…
我也看不出有什么问题。我建议您删除所有样式并逐条添加规则以查看其中断的位置。
我把东西上传到了一个 URL：misc.snapcode.se/polymer 你能看看你的 Firefox 是不是很奇怪吗？
如果您删除“div”上的填充和边距，它应该可以工作。在我的 Firefox 上看起来不错。您是否清除了缓存并且有最新版本？

标签： ios google-chrome polymer polyfills

【解决方案1】：

正如我在另一个线程中提到的，polyfill CSS 范围是不可能的。 iOS 上的 Chrome 实际上并不是 Chrome，它是使用 iOS WebView（当时是一个旧的）构建的，这意味着没有原生的 Shadow DOM 和 CSS 范围。 Shadow DOM polyfill 确实正确地包装了 DOM API 方法，例如 querySelector 和 getElementById，因此在这方面您确实获得了 limited 封装。但是对于 CSS，polyfill 唯一能做的就是重命名您的选择器，因此 :host .blah 被重命名为 x-foo .blah 并附加到头部的样式标签。这意味着您仍然需要编写防御性 CSS（就像您现在所做的那样）并避免使用非常松散的选择器，因为它们会被应用。

【讨论】：

【解决方案2】：

我今天经历了一件很奇怪的事情，也许对你有帮助。

我的 firefox 正在渲染，就好像 polyfill 不存在一样。
所以我在 about:config dom.webcomponents.enabled 上返回 false，它又恢复了活力。

为什么？没有线索。
它起作用了，所以，如果你在 firefox 上有 dom.webcomponents.enabled true about:config 不妨试一试。恕我直言，在功能强大（但有缺陷且支持不佳）的 Web 组件浏览器上看起来像是一个 polyfill 错误。值得一试。

【讨论】：

谢谢。如果我转到 about:config 并向下滚动到 dom.webcomponents.enabled，它被设置为 false。但是，如果我将其切换为true，然后重新加载页面，它比以前更糟糕，现在我只看到文字“LEO”和一个白色的小框。所以设置为“false”效果更好......
我仍然怀疑它的 ShadowDOM 以某种方式失败了。如果您对详细信息感兴趣，请参阅我的其他 SO 问题。
请问您是否有一个 Polymer 网站正在运行，我可以测试一下吗？一定有什么明显的我失踪了......
我唯一的一个来自一家我每天工作 4 小时的公司，它受密码保护。对不起。您是否尝试过在聚合物设计器工具上对其进行原型设计？你在聚合物 0.5.2 上吗？至少但不是最后一个（这也给我带来了问题：你必须使用 Polymer("element-name",{etc}); Polymer({etc}); 不会为 firefox 和其他人做。
是的，这部分看起来还不错。这似乎是 CSS 的东西，而不是元素根本不渲染。