Polymer: Layout screwed up in Firefox, fine in Chrome

问题

So, I am aware the web components, Shadow DOM and such is only implememted natively in Chrome today.

For support in Firefox, Polyfill is needed. According to the website, Polymer has polyfill support in Firefox:

https://www.polymer-project.org/resources/compatibility.html

but when I have made a very simple page, it looks completely screwed up i Firefox. But, if I try the Polymer website in Firefox, it works there without any obvious problems.

Test URL: http://misc.snapcode.se/polymer/

Here is how my test-site looks in Chrome:

and in Firefox:

The code can be seen below.

But they say that Firefox has Polyfill support, and it supports CSS, so why is the layout/design so screwed up?
How come they get their own site to work in Firefox, but a super-simple site I build is screwed up?
If I try out the paper-dropdown in FF, it works fine on their demo site, but if I use the paper-dropdown on my own site, constructed the same way as described on the polymer website, its completely screwed up. Why?

What am I missing?

EDIT 1 I found out that to get the header panel "right" in Firefox, I have to remove the CSS in index.php for the div {...}:

That seems to me like the Shadow DOM isnt working correctly, even though I have imported webcomponents.js, which should be the Polyfill needed.

EDIT 2

I have looked in Firefox using Firebug and I can see the following:

As I can see it, webcomponents.min.js is imported (I tested different js files), and there is some stuff talking about ShadowDOMPolyfill. So, it is even weirder now I think.

EDIT 3 I debugged Firefox using Firebug, image below. As I see it, ShadowDOM using Polyfill is indeed detected and used. Do you agree? =)

index.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LEO</title>
    <script src="/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/components/font-roboto/roboto.html">
    <link rel="import" href="/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="/components/core-toolbar/core-toolbar.html">
    <link rel="import" href="/components/core-icons/core-icons.html">
    <link rel="import" href="/components/paper-shadow/paper-shadow.html">
    <link rel="import" href="/components/paper-button/paper-button.html">
    <link rel="import" href="/my-components/logout-button/logout-button.html">
    <link rel="import" href="/my-components/assignment-card/assignment-card.html">

    <style>
        html, body {
            height: 100%;
            margin: 0px;
            background-color: #E5E5E5;
            font-family: 'RobotoDraft', sans-serif;
        }
        paper-shadow {
            width: 300px;
            background: #FFF;
            margin: 10px;
            padding: 10px;
        }
        div {
            padding: 10px;
            margin: 10px;
        }

    </style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
    echo "Not logged in";
    
}
?>
<core-header-panel flex layout>
    <core-toolbar>
        <div flex>LEO 1</div>
        <div>
            <logout-button></logout-button>
        </div>
    </core-toolbar>

    <div id="id1" horizontal layout >
      <assignment-card></assignment-card>
    </div>
</core-header-panel>

<script>
   
</script>
    
</body>
</html>

assignment-card.html

<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-dropdown/core-dropdown.html">
<link rel="import" href="/components/core-dropdown-menu/core-dropdown-menu.html">

<link rel="import" href="/components/paper-item/paper-item.html">
<link rel="import" href="/components/paper-menu/paper-menu.html">
<link rel="import" href="/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">


<link rel="import" href="/components/core-ajax/core-ajax.html">
<link rel="import" href="/components/core-tooltip/core-tooltip.html">


<polymer-element name="assignment-card">
    <template>
         <style>
            input {
                padding: 10px;
                font-family: 'RobotoDraft', sans-serif;
                font-size: 16px;
                margin: 0px;
            }
             core-icon[icon="error"] {
                width: 40px;
                height: 40px;
                color: red;
            }
            core-icon[icon="perm-identity"] {
                width: 40px;
                height: 40px;
            }
            core-icon[icon="lock-outline"] {
                width: 40px;
                height: 40px;
            }
            core-icon[icon="arrow-forward"] {
                color: #e4e4e4;
            }
            core-icon {
                color: #808080;
            }
            paper-button {
                background-color: #6fd177;
                margin: 0px;
            }
            core-field {
                margin-bottom: 10px;
            }
            div[id="container"] {
                background: #C0C0C0;
                padding: 5px;
            }
            div
            {
                margin: 10px;
                font-size: 12px;
            }
        </style>
        
        <div id="container" layout vertical >
            <div layout horizontal>
                <core-label >Starttid: 14:13</core-label>
                <core-label flex></core-label>
                <core-label >Uppdrags-id: 13213241</core-label>
            </div>
            
            <div><core-label>Kertin Karlsson,</core-label></div>
            <div layout horizontal relative>
                <paper-dropdown-menu raised label="-Välj" style='background: #fff; padding: 5px; margin: 0px; margin-right: 15px; ' flex>
                    <paper-dropdown class="dropdown" layered="true">
                        <core-menu class="menu">
                            <template repeat="{{assistant in assistants}}">
                                <paper-item name="{{assistant.id}}">{{assistant.name}}</paper-item>
                            </template>
                        </core-menu>
                    </paper-dropdown>
                </paper-dropdown-menu>
                <paper-button raised>Tilldela</paper-button>
            </div>
        </div>
        
        <core-ajax 
                   id="coreAjax1" 
                   url="http://192.168.1.108/relay.php" 
                   method="post" 
                   params='{{json}}'
                   handleAs="json" 
                   on-core-response="{{handleResponse}}">
        </core-ajax>
    </template>
    <script>
        Polymer('assignment-card', {
            ready: function() {
                this.assistants = [
                  {id: 1, name: 'Kalle'},
                  {id: 2, name: 'Ted'},
                  {id: 3, name: 'Micke'},
                  {id: 4, name: 'Bengt'},
        ];
            }
        });
    </script>
</polymer-element>

logout-button.html

<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">

<polymer-element name="logout-button">
    <template>
        <style>
            paper-button
            {
                background: #DF0101;
                color: white;
            }
        </style>
        <core-ajax 
                   id="coreAjax1" 
                   url="http://192.168.1.108/logout.php" 
                   on-core-response="{{handleResponse}}">
        </core-ajax>
        
        <paper-button raised id="btnLogout" on-click="{{onLogoutClicked}}">Logga ut&nbsp;
                <core-icon icon="highlight-remove"></core-icon>
        </paper-button>
    </template>
    <script>
        Polymer('logout-button', {
            onLogoutClicked: function()
            {
                
                this.$.coreAjax1.go();
            },
            handleResponse: function(e)
            {
                document.location.href = '/index.php';
            }
        });
    </script>
</polymer-element>

回答1:

The problem persist because firefox does not create shadow DOM but it displays shadow content directly. So the following snippet screws the overall view:

paper-shadow {
    width: 300px;
    background: #FFF;
    margin: 10px;
    padding: 10px;
}
div {
    padding: 10px;
    margin: 10px;
}

If you remove that code and add some specific code then it will work. The snippet for index.php with specific code is given below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LEO</title>
    <script src="/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/components/font-roboto/roboto.html">
    <link rel="import" href="/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="/components/core-toolbar/core-toolbar.html">
    <link rel="import" href="/components/core-icons/core-icons.html">
    <link rel="import" href="/components/paper-shadow/paper-shadow.html">
    <link rel="import" href="/components/paper-button/paper-button.html">
    <link rel="import" href="/my-components/logout-button/logout-button.html">
    <link rel="import" href="/my-components/assignment-card/assignment-card.html">

    <style>
        html, body {
            height: 100%;
            margin: 0px;
            background-color: #E5E5E5;
            font-family: 'RobotoDraft', sans-serif;
        }
        assignment-card,
        logout-button{
            margin: 10px;
        }
        logout-button paper-button{
            top: 3px;
        }

    </style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
    echo "Not logged in";
    
}
?>
<core-header-panel flex layout>
    <core-toolbar>
        <div flex>LEO 1</div>
        <div>
            <logout-button></logout-button>
        </div>
    </core-toolbar>

    <div id="id1" horizontal layout >
      <assignment-card></assignment-card>
    </div>
</core-header-panel>

<script>
   
</script>
    
</body>
</html>

来源：https://stackoverflow.com/questions/27480345/polymer-layout-screwed-up-in-firefox-fine-in-chrome

标签

css

google-chrome

firefox

polymer

web-component