CODEWITHSUNDEEP
htmlgoogle-chromebrowsercross-browserpolymer
miguelarcilla
miguelarcilla

Reputation: 1456

Polymer - Getting content to appear in non-Chrome browsers

I am using Polymer in a website that I am developing, and have had consistent results when developing in Google Chrome. However, when I test the content in other browsers (IE11, FireFox 32, Chrome on Android), I only see a blank screen or, occasionally, plain content without formatting. According to 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 render properly on these browsers, albeit with a slight delay.

Is there a step that I am missing that prevents me from seeing my content generated properly on browsers other than Chrome, including Chrome for Android?

Below is a sample skeleton of my page. I have observed that some use templates and custom elements, but I am unsure of what I need to change to get this to run properly outside of Chrome for Desktop.

<!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>

Upvotes: 0

Views: 178

Answers (1)

Erik Isaksen
Erik Isaksen

Reputation: 226

I see this issue often but I do notice that with each release of Polymer, this gets better & better. I would expect that with the performance changes in 0.8 we will not see this at all BUT I am only speculating on that.

That said, make sure you are on the latest stable release of Polymer. I can look into other potential problems related to this if you can post a url I can debug. I am happy to do what I can and I understand if it is a client site. If it's private then maybe you can recreate the code in a codepen.io or ele.io example. This isn't optimal but it might be enough to debug.

Upvotes: 1

Related Questions