Polymer - 让内容出现在非 Chrome 浏览器中
Polymer - Getting content to appear in non-Chrome browsers
我正在开发的网站中使用 Polymer,并且在 Google Chrome 中开发时得到了一致的结果。但是,当我在其他浏览器(IE11、FireFox 32、Android 上的 Chrome)中测试内容时,我只看到空白屏幕,或者偶尔看到没有格式的纯内容。根据 Polymer's Browser Compatibility page, I should not expect these features to render properly on other browsers (except for Chrome on Android). However, pages like PolyMail and Kitteh Anonymous 在这些浏览器上正确呈现,尽管有轻微的延迟。
我是否遗漏了一个步骤,导致我无法在 Chrome 以外的浏览器(包括 Chrome for Android 上看到正确生成的内容?
下面是我的页面的示例框架。我观察到一些使用模板和自定义元素,但我不确定我需要更改什么才能在桌面 Chrome 之外正确地将其设置为 运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>My Polymer Site</title>
<!--Initialize Polymer-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
</head>
<body unresolved fullbleed>
<core-drawer-panel id="site-container-panel">
<core-header-panel id="site-nav" drawer>
<!-- drawer header panel content here -->
</core-header-panel>
<core-header-panel mode="waterfall-tall" main>
<!-- main header panel content here -->
</core-header-panel>
</core-drawer-panel>
</body>
</html>
我经常看到这个问题,但我注意到随着 Polymer 的每次发布,这个问题都会变得越来越好。我希望随着 0.8 中的性能变化,我们根本看不到这一点,但我只是对此进行推测。
也就是说,请确保您使用的是最新稳定版的 Polymer。如果您可以 post a url 我可以调试,我可以调查与此相关的其他潜在问题。我很高兴尽我所能,如果它是一个客户站点,我也能理解。如果它是私有的,那么也许您可以在 codepen.io 或 ele.io 示例中重新创建代码。这不是最佳选择,但可能足以进行调试。
我正在开发的网站中使用 Polymer,并且在 Google Chrome 中开发时得到了一致的结果。但是,当我在其他浏览器(IE11、FireFox 32、Android 上的 Chrome)中测试内容时,我只看到空白屏幕,或者偶尔看到没有格式的纯内容。根据 Polymer's Browser Compatibility page, I should not expect these features to render properly on other browsers (except for Chrome on Android). However, pages like PolyMail and Kitteh Anonymous 在这些浏览器上正确呈现,尽管有轻微的延迟。
我是否遗漏了一个步骤,导致我无法在 Chrome 以外的浏览器(包括 Chrome for Android 上看到正确生成的内容?
下面是我的页面的示例框架。我观察到一些使用模板和自定义元素,但我不确定我需要更改什么才能在桌面 Chrome 之外正确地将其设置为 运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>My Polymer Site</title>
<!--Initialize Polymer-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
</head>
<body unresolved fullbleed>
<core-drawer-panel id="site-container-panel">
<core-header-panel id="site-nav" drawer>
<!-- drawer header panel content here -->
</core-header-panel>
<core-header-panel mode="waterfall-tall" main>
<!-- main header panel content here -->
</core-header-panel>
</core-drawer-panel>
</body>
</html>
我经常看到这个问题,但我注意到随着 Polymer 的每次发布,这个问题都会变得越来越好。我希望随着 0.8 中的性能变化,我们根本看不到这一点,但我只是对此进行推测。
也就是说,请确保您使用的是最新稳定版的 Polymer。如果您可以 post a url 我可以调试,我可以调查与此相关的其他潜在问题。我很高兴尽我所能,如果它是一个客户站点,我也能理解。如果它是私有的,那么也许您可以在 codepen.io 或 ele.io 示例中重新创建代码。这不是最佳选择,但可能足以进行调试。