Styles not loaded properly when refreshing on the Automations or Z-Wave panels

[patrickeasters]

Browser: Safari 10.1 OS: MacOS 10.12.4

When refreshing on the Automation or Z-Wave panels, the UI reloads with purple headers and other non-standard styles.

I can only seem to reproduce this on Safari so far. Saw this reported on Reddit, so wanted to track an issue.

Steps to reproduce:

1. Log in to the UI
2. Click on the either the Automations or Z-Wave panels
3. Refresh the page (Cmd+R)

At this point HASS refreshes and the UI uses non-standard styles. The header is #3f51b5 (Indigo from the Paper styles).

The developer console in Safari shows these duplicate definition errors.

Console Errors

[Error] Error: DuplicateDefinitionError: a type with name 'paper-ripple' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    (anonymous function) (data:text/javascript;charset=utf-8,!fu…%0A:1:4690)
    Global Code (data:text/javascript;charset=utf-8,!fu…%0A:1:7443)
[Error] Error: DuplicateDefinitionError: a type with name 'iron-overlay-backdrop' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    (anonymous function) (data:text/javascript;charset=utf-8,!fu…%0A:1)
    Global Code (data:text/javascript;charset=utf-8,!fu…%0A:1:1068)
[Error] Error: DuplicateDefinitionError: a type with name 'opaque-animation' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    Global Code (data:text/javascript;charset=utf-8,Pol…%0A:1)
[Error] Error: DuplicateDefinitionError: a type with name 'iron-dropdown' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    (anonymous function) (data:text/javascript;charset=utf-8,!fu…%0A:1)
    Global Code (data:text/javascript;charset=utf-8,!fu…%0A:1:3835)
[Error] Error: DuplicateDefinitionError: a type with name 'fade-in-animation' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    Global Code (data:text/javascript;charset=utf-8,Pol…%0A:1)
[Error] Error: DuplicateDefinitionError: a type with name 'fade-out-animation' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    Global Code (data:text/javascript;charset=utf-8,Pol…%0A:1)
[Error] Error: DuplicateDefinitionError: a type with name 'paper-menu-grow-height-animation' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    Global Code (data:text/javascript;charset=utf-8,Pol…%0A:1)
[Error] Error: DuplicateDefinitionError: a type with name 'paper-menu-button' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    (anonymous function) (data:text/javascript;charset=utf-8,!fu…%0A:1:121)
    Global Code (data:text/javascript;charset=utf-8,!fu…%0A:1:2418)
[Error] Error: DuplicateDefinitionError: a type with name 'iron-iconset-svg' is already registered
    t (webcomponents-lite.min.js:12:3730)
    Polymer (data:text/javascript;charset=utf-8,!fu…%0A:1:1498)
    Global Code (data:text/javascript;charset=utf-8,Pol…%0A:1)

Screenshots

[mattholst]

I am able to reproduce this in Chrome on Windows 10 as well.

[balloob]

Unable to repro in Chrome 59 on OS X.

Note that this issue will probably be fixed once we upgrade to Polymer 2.