Rendering of Polymer web app on safari and firefox - html

Question

I'm having a nightmare on rendering my webapp on safari. I have a iron-list in my custom element and the data that will be display are from iron-ajax request. Everything works well in chrome but when I test it on safari, it wasn't rendered properly. Here is what I notice under the hook,
for safari:
<iron-list id="abc" style="min-height: 50px; overflow: auto;" selection-enabled="" class="style-scope view-file x-scope iron-list-0">
<array-selector id="selector" class="style-scope iron-list">
</array-selector>
<div id="items" class="style-scope iron-list" style="height: 15008px;">
<template class="style-scope view-file"></template>
<div class="style-scope view-file" style="transform: translate3d(0px, 0px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="0">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">disk</label>
</div>
<div class="cell ctime style-scope list-row">29 May 2016 at 21:32:38 GMT+2</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 1876px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">lost+found</label>
</div>
<div class="cell ctime style-scope list-row">29 May 2016 at 21:32:20 GMT+2</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 3752px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">private</label>
</div>
<div class="cell ctime style-scope list-row">29 May 2016 at 21:32:38 GMT+2</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
</div>
</iron-list>
for chrome:
<iron-list id="abc" style="min-height: 50px; overflow: auto;" selection-enabled="" class="style-scope view-file x-scope iron-list-0">
<array-selector id="selector" class="style-scope iron-list">
</array-selector>
<div id="items" class="style-scope iron-list" style="height: 328px;">
<template class="style-scope view-file"></template>
<div class="style-scope view-file" style="transform: translate3d(0px, 0px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="0">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">disk</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 41px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">lost+found</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:20 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 82px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">private</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 123px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">public</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 164px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">replica</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 205px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">reserved</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 246px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">resilient</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
<div class="style-scope view-file" style="transform: translate3d(0px, 287px, 0px);">
<list-row class="item style-scope view-file x-scope list-row-0" tabindex="-1">
<div id="row" class="row style-scope list-row">
<file-type-icon style="padding-left: 10px;" class="style-scope list-row">
<iron-icon class="foo style-scope file-type-icon dir x-scope iron-icon-2" id="foo">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" class="style-scope iron-icon"></path>
</g>
</svg>
</iron-icon>
</file-type-icon>
<div class="cell name style-scope list-row">
<label id="filename" style="padding-left:5px;" class="style-scope list-row">tape</label>
</div>
<div class="cell ctime style-scope list-row">5/29/2016, 9:32:38 PM</div>
<div class="cell mtime style-scope list-row">
<template is="dom-if" restamp="" class="style-scope list-row"></template>
<template is="dom-if" restamp="" class="style-scope list-row"></template>
</div>
<div class="cell size style-scope list-row" id="hovering">
<span class="style-scope list-row">--</span>
</div>
</div>
</list-row>
</div>
</div>
</iron-list>
one major thing that stick out of both snippets is the difference in the height of the div, for chrome:
<div id="items" class="style-scope iron-list" style="height: 328px;">
and for safari:
<div id="items" class="style-scope iron-list" style="height: 15008px;">.
Here is the source code of the element:
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../../../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../list-view/list-row.html">
<link rel="import" href="../../access-denied-or-empty-directory/access-denied-or-empty-directory.html">
<dom-module id="view-file">
<style>
:host {
#apply(--layout-fit);
#apply(--layout-vertical);
margin: 0px 30px;
/*Prevent text selection after double click*/
-webkit-user-select: none;
/* webkit (safari, chrome) browsers */
-moz-user-select: none;
/* mozilla browsers */
-khtml-user-select: none;
/* webkit (konqueror) browsers */
-ms-user-select: none;
/* IE10+ */
}
.fit {
#apply(--layout-fit);
}
.item {
text-decoration: none !important;
background-color: white;
#apply(--layout-flex);
cursor: pointer;
}
.item:hover {
background-color: #e9e9e9;
}
.item.selected {
background-color: #2196F3;
color: #fafafa;
outline: 0;
}
</style>
<template>
<iron-ajax id="ajax" auto url="{{url}}" method="GET" content-type="application/json" headers$='[[_computeHeaders(isSomebody)]]' handle-as="json" on-response="handleResponse" last-response="{{data}}">
</iron-ajax>
<paper-material id="content" elevation="1">
<template is="dom-if" if="{{hasFiles}}" restamp>
<iron-list id="abc" items="[[data.children]]" style="min-height:50px;" selected-item="{{selectedItem}}" selected-items="{{selectedItems}}" selection-enabled>
<template>
<div>
<list-row class$="[[_computedClass(selected)]]" tabindex$="[[tabIndex]]" name="{{item.fileName}}" file-type="{{item.fileType}}" ctime="{{item.creationTime}}" mtime="{{item.mtime}}" size="{{item.size}}" loc="{{item.fileLocality}}" parent-path="[[parent]]">
</list-row>
</div>
</template>
</iron-list>
</template>
<template is="dom-if" if="{{isEmptyDenied}}" restamp>
<access-denied-or-empty-directory message="{{msg}}"></access-denied-or-empty-directory>
</template>
</paper-material>
</template>
<script>
Polymer
({
is: "view-file",
properties: {
path: {
type: String,
value: "/",
notify: true
},
parent: {
type: String,
notify: true,
computed: '_computeParentPath(path)'
},
selectedItems: {
type: Object
},
selectedItem: {
type: Object
},
isSel: {
type: Boolean,
notify: true
},
hasFiles: {
type: Boolean,
notify: true
},
isEmptyDenied: {
type: Boolean,
notify: true
},
isSomebody: {
type: Boolean,
notify: true
},
url: {
type: Object,
notify: true,
value: function() {
return window.CONFIG.restHostName + ":" + window.CONFIG.restPort + window.CONFIG.restPath +
"namespace/?children=true&locality=true";
},
computed: '_url(path)'
},
msg: {
type: String,
notify: true
},
},
attached: function() {
this.isSomebody = app.$.WhoAmI.isSomebody;
},
_computedClass: function(isSelected) {
var classes = 'item';
if (isSelected) {
classes += ' selected';
}
this.updateStyles();
return classes;
},
_url: function(path) {
if (this.path == null || this.path == "" || this.path == "/") {
return window.CONFIG.restHostName + ":" + window.CONFIG.restPort +
window.CONFIG.restPath + "namespace/?children=true&locality=true";
} else {
path = decodeURIComponent(this.path);
path = path.replace(/=/g, "/");
return window.CONFIG.restHostName + ":" + window.CONFIG.restPort + window.CONFIG.restPath +
"namespace" + path + "/?children=true&locality=true";
}
},
_computeParentPath: function(path) {
if (this.path == null || this.path == "" || this.path == "/") {
path = "/";
return path;
} else {
path = decodeURIComponent(this.path);
path = path.replace(/=/g, "/");
return path + "/";
}
},
_computeHeaders: function(isSomebody) {
//For now use this for this development stage
// TODO: need to re-wire this function activities
if (isSomebody == true) {
if (sessionStorage.upauth == null || sessionStorage.upauth == "") {
return '{"Accept":"application/json"}';
} else {
auth = sessionStorage.upauth;
return '{"Accept":"application/json", "Authorization":"Basic ' + auth + '"}';
}
} else {
return '{"Accept":"application/json"}';
}
},
handleResponse: function(e, request) {
//FIXME: Not the suitable solution. Error not properly handle.
x = request.xhr.response.children;
if (x.length == 0 || (x.length == 1 && (x[0].messages != undefined || x[0].messages != null))) {
this.isEmptyDenied = true;
this.hasFiles = false;
if (x.length == 0) {
this.msg = "Empty Directory";
} else if (x[0].messages != undefined || x[0].messages != null) {
this.msg = (x[0].messages).toString();
}
} else {
this.isEmptyDenied = false;
this.hasFiles = true;
}
Polymer.dom.flush();
this.updateStyles();
e.stopPropagation();
},
});
</script>
</dom-module>
And the index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="import" id="bundle" href="elements/elements.html">
</head>
<body class="fullbleed layout vertical">
. . .
<div class="fit">
<view-file id="homeDir"></view-file>
</div>
. . .
</body>
</html>
Please how can I fix this

Answer 1

You're probably missing this:
<script>
// Load Web Components when not supported
var webComponentsSupported = ("registerElement" in document
&& 'import' in document.createElement("link")
&& 'content' in document.createElement("template"));
if (!webComponentsSupported) {
var script = document.createElement("script");
script.src = "assets/bower_components/webcomponentsjs/webcomponents-lite.js";
document.head.appendChild(script);
console.log("WebComponents Loaded");
}
</script>
You should put this script on the index, right after loading polymer and the elements. This script will load WebComponents when it isn't supported by default.