Repository navigation
Safari bug when rendering a table using nested loops #700
Description
Activity
This type of syntax is unsupported where the
<template>element is polyfilled (this is only Safari and IE!). You'll need to use<tr template repeat="{{ row in rows }}">There's more info here: http://www.polymer-project.org/docs/polymer/databinding-compat.html#elements-that-cant-contain-a-template
Odd, when I change the JS Bin code to adhere to the compatibility recommendations, it breaks in FF and Safari. See here.
Interestingly it doesn't do this when I run an app locally using the same syntax. However, it does when I vulcanize said app!
I created a repo that reproduces the issue: https://github.com/shmay/polymer-td-repeat-issue
@jmesserly John, would you mind taking a look at this one?
The behavior now seems broken in Chrome as well: http://jsbin.com/litosoyepina/4/edit
The above breakage is only on master and I think it's due to TemplateBinding now being loaded after
DOMContentLoaded. Let me sort that part out.OK, identified the problem. It's currently possible for Polymer to attempt to stamp a template before the TemplateBinding library has decorated the template. We'll get this fixed in the next release, but until then I can give you a workaround. You'll need to implement the
instanceTemplatemethod on your element like so:instanceTemplate: function(template) { HTMLTemplateElement.decorate(template); return this.super(arguments); }Here's a jsbin that works:
We now ensure the template is properly decorated before stamping shadowRoot. Fixed via googlearchive/polymer-dev@73801fc.
Excellent, thank you!
- added a commit that references this issue
on Oct 31, 2014
JS Bin example
If I try to render a table using nested loops, like so:
it renders just fine in Chrome/FF, but not Safari (haven't tested IE). It seems to be specific to the tr/td tags -- if I turn them into divs, it renders in Safari. Thanks!