[polymer-dev] Re: iron-scroll-threshold for iron-list inside paper-scroll-header-panel
Hey Philippe, paper-scroll-header-panel doesn't expose the scroller property for id binding, but you can still set the scroll target programmatically. e.g. ironList.scrollTarget = paperScrollHeaderPanel.scroller; ironThreshold.scrollTarget = paperScrollHeaderPanel.scroller; On Wednesday, February 10, 2016 at 8:59:54 AM UTC-8, pithon.ph...@gmail.com wrote: > > Hi, > > I want use iron-scroll-threshold for iron-list inside > a paper-scroll-header-panel > > it's not working > > scroll-target="id_paper_scroll_header_panel" > > and I can not find an example > > ideas ??? > > Philippe > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/83d9d020-3847-4bae-93df-d7c09e93e88f%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: iron-list/ Uncaught RangeError: Invalid array length when setting items array.
Btw, this issue should be fixed now in
https://github.com/PolymerElements/iron-list/releases/tag/v1.0.2
~ Emmanuel
On Fri, Jul 24, 2015 at 12:23 PM, Kujako jfi...@vintara.com wrote:
Found a work around. As you suggested, this is related to issue 36. It
only happens when the iron-list is attached to the DOM but not rendered due
to a parent element being hidden. So the solution is to not instantiate the
array until after it's rendered. So rather then have default values, I
check if the array is null when pushing new items into it.
addItem: function(item) {
if(this.myItems==null) this. myItems =[];
this.push(myItems, JSON.parse('{name:'+item+'}'));
console.log('my-list:'+item);
}
This seems to work, without error.
On Friday, July 24, 2015 at 11:58:16 AM UTC-7, Kujako wrote:
Weirder and weirder. If I put the dom-module inline in index.html I do
not see the error, but in my project I also do not see the iron-list
rendered. If I move it to an external file, I get the error but DO see the
elements. So no work around
I really need to stop the error. Everything works fine with the error
when run from the desktop, but the error causes Cordova to halt.
On Friday, July 24, 2015 at 11:34:50 AM UTC-7, Emmanuel Garcia wrote:
It seems like this issue is related to
https://github.com/PolymerElements/iron-list/issues/36 as well.
~ Emmanuel
On Fri, Jul 24, 2015 at 11:23 AM, Kujako jfi...@vintara.com wrote:
That looks right, and when I copy in my code it works OK. The error
seems to only happen when I have my-list defined in an external file
So if I copy the code into a file named my-list.html and import it
with...
link rel=import href=/elements/my-list.html/
and then reference it with...
my-list/my-list
I see the error...
On Friday, July 24, 2015 at 11:01:29 AM UTC-7, Emmanuel Garcia wrote:
Is there something different in this example
http://jsbin.com/facani/edit?html,output (apart from the css)?
On Friday, July 24, 2015 at 10:47:11 AM UTC-7, Kujako wrote:
Yes, bower.json shows version 1.0.1
On Friday, July 24, 2015 at 10:37:29 AM UTC-7, Emmanuel Garcia wrote:
Are you using the last version of iron-list (v1.0.1)? Here's your
code using the last version:
http://jsbin.com/facani/edit?html,output
bower update or
https://github.com/PolymerElements/iron-list/releases/tag/v1.0.1
On Friday, July 24, 2015 at 9:16:32 AM UTC-7, Kujako wrote:
I'm trying to setup an iron-list using a local array for its data
source.
dom-module id=“my-list
template
iron-list items={{myItems}} as=item indexAs=myIndex
template
div class=item{{item.name}}/div
/template
/iron-list
/template
script
Polymer({
is:’my-list',
properties: {
myItems: {
type: Array,
notify: true
}
},
addItem: function(item) {
this.push(myItems, JSON.parse('{name:'+item+'}'));
},
ready: function() {
this.myItems=[
{'name':'Taco'},
{'name':'Burger'},
{'name':'Fries'},
{'name':'Chips'}
];
}
});
/script
/dom-module
Everything works, but from the ready() method I get Uncaught
RangeError: Invalid array length. This seems to happen whenever the
array
is set for the first time. While this does not impact operations from a
browser, Cordova stops on this error.
Any ideas as to how to suppress or prevent this error? Kind of
running blind as I can't find any example code to work off of.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
Polymer group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAMFWwnSEBJuR%3Dwbvk-EG%2BC1Gn2%3D%3DBVRJ3Qk5rjhzA5tbXAJ6xg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] How to start debugging slow Polymer perf?
I have confirmed this issue. It seems like a regression in chrome that can
be reproduced in a non-retina display screen by just adding *overflow:
auto. *Here's an example: http://jsbin.com/midoga/edit?html,output . I
will keep you posted as we find out more.
On Monday, July 27, 2015 at 9:09:33 AM UTC-7, al...@streak.com wrote:
So all sites that use polymer drawers will have slow scroll perf because
the main content section always repaints?
On Saturday, July 25, 2015 at 7:21:57 AM UTC-7, Aleem Mawani wrote:
Non-retina macbook air 13
On Sat, Jul 25, 2015 at 7:21 AM Eric Bidelman ebi...@gmail.com
javascript: wrote:
Are you on a retina machine? If not what kind? If you're on a Mac that's
likely the difference. Chrome has a different rendering path on retina vs.
non-retina screens.
On Fri, Jul 24, 2015, 8:21 PM al...@streak.com javascript: wrote:
Hmmm. Attached video showing repaints. and screenshot of me being on
chrome 44
On Friday, July 24, 2015 at 5:09:32 PM UTC-7, Frankie Fu wrote:
I tried your minimal example and when I scrolled the content I didn't
see the repaint on the entire content that you mentioned. I was
testing the latest paper-drawer-panel on Chrome 44.
On Fri, Jul 24, 2015 at 3:10 PM, Aleem Mawani al...@streak.com wrote:
Thanks for the clue - looking at the dev tools, you're correct that the
bad scrolling perf is coming from excessive paints. Turning on show
paint
rectangles I was able to narrow it down to the paper-drawer-panel's
main
content that was creating the issue. Here is a mimal example that shows
that the main content pain will repaint its entire contents during
scrolling. Seems like an issue with the paper-drawer-panel?
!DOCTYPE html
html
head
script
src=/bower_components/webcomponentsjs/webcomponents-lite.min.js/script
link rel=import
href=/bower_components/paper-drawer-panel/paper-drawer-panel.html
style
.maincontent {
background: #cf9a9a;
overflow: auto;
}
.sidebar {
background: white;
}
/style
/head
body
paper-drawer-panel
div class=sidebar drawer
/div
div class=maincontent main
div style=height:4000px/div
/div
/paper-drawer-panel
/body
/html
If you load that you'll see that the maincontent div will always
repaint in its entirety.
On Fri, Jul 24, 2015 at 2:30 PM Eric Bidelman ebi...@gmail.com
wrote:
Scrolling issues usually means poort interactions with css selectors
and style recalcs are causing large paints. That would be my guess.
That
doesn't have to do with templating or data binding but it's hard to say
without seeing your app or knowing more about the code.
Another thing to try is use template is=dom-if to only stamp
initial DOM that you need. I've seen people create apps with 5000-7000
DOM
nodes on page load. There's never a good idea for any app.
On Fri, Jul 24, 2015 at 4:22 PM Aleem Mawani al...@streak.com
wrote:
Thanks for those.
Are there any polymer specific perf issues we should be aware of
with respect to data binding or templating? If there are perf issues
in
this area, would they be relatively easy to spot in the devtools?
On Fri, Jul 24, 2015 at 2:20 PM Eric Bidelman ebi...@gmail.com
wrote:
As with any web app, the Devtools Timeline is your best friend when
it comes to anything related to jank (rendering, scrolling, paint
issues):
https://developer.chrome.com/devtools/docs/timeline
The usual suspects are large paints on scrolling or doing extra
work (layout, etc). Be sure to turn on Show paint rects to see
where your
time is being spent:
https://developer.chrome.com/devtools/docs/rendering-settings
There's also a ton of great content at http://jankfree.org/ to
learn more.
On Fri, Jul 24, 2015 at 3:33 PM al...@streak.com wrote:
I'm writing a Polymer based app and at some point the UI has
gotten really slow to render and really slow to scroll.
Does anyone know of any resources or tips on the best way to get
started debugging polymer performance issues?
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google
Groups Polymer group.
To unsubscribe from this group and stop receiving emails from it,
send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/74af7c92-213c-4bf1-b3fd-30e3f895ee1e%40googlegroups.com
https://groups.google.com/d/msgid/polymer-dev/74af7c92-213c-4bf1-b3fd-30e3f895ee1e%40googlegroups.com?utm_medium=emailutm_source=footer
.
For more options, visit https://groups.google.com/d/optout.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google
Groups Polymer group.
To unsubscribe from this group and
Re: [polymer-dev] How to start debugging slow Polymer perf?
I opened an issue in Chrome. (It should be public soon
https://code.google.com/p/chromium/issues/detail?id=514303)
tl;dr
It's not an issue in Chrome, indeed, Chrome doesn't do composited overflow
scrolling traditionally for non-retina outputs because those outputs need
LCD text. That's why you see that large paint rectangle. After talking to
some folks, the paint might not be as bad as it looks like since some of
those are optimized. I'd say that we should pay attention to the FPS meter
as it gives a better picture of how many frames per second we ship. Your
drawer-panel example runs at nearly 60fps even though we get that big paint
region.
Thanks
On Monday, July 27, 2015 at 12:23:15 PM UTC-7, Aleem Mawani wrote:
Thanks for looking into that.
On Mon, Jul 27, 2015 at 12:11 PM Emmanuel Garcia egar...@google.com
javascript: wrote:
I have confirmed this issue. It seems like a regression in chrome that
can be reproduced in a non-retina display screen by just adding *overflow:
auto. *Here's an example: http://jsbin.com/midoga/edit?html,output . I
will keep you posted as we find out more.
On Monday, July 27, 2015 at 9:09:33 AM UTC-7, al...@streak.com wrote:
So all sites that use polymer drawers will have slow scroll perf because
the main content section always repaints?
On Saturday, July 25, 2015 at 7:21:57 AM UTC-7, Aleem Mawani wrote:
Non-retina macbook air 13
On Sat, Jul 25, 2015 at 7:21 AM Eric Bidelman ebi...@gmail.com wrote:
Are you on a retina machine? If not what kind? If you're on a Mac that's
likely the difference. Chrome has a different rendering path on retina
vs.
non-retina screens.
On Fri, Jul 24, 2015, 8:21 PM al...@streak.com wrote:
Hmmm. Attached video showing repaints. and screenshot of me being on
chrome 44
On Friday, July 24, 2015 at 5:09:32 PM UTC-7, Frankie Fu wrote:
I tried your minimal example and when I scrolled the content I
didn't see the repaint on the entire content that you mentioned. I
was testing the latest paper-drawer-panel on Chrome 44.
On Fri, Jul 24, 2015 at 3:10 PM, Aleem Mawani al...@streak.com
wrote:
Thanks for the clue - looking at the dev tools, you're correct that
the bad scrolling perf is coming from excessive paints. Turning on
show
paint rectangles I was able to narrow it down to the
paper-drawer-panel's
main content that was creating the issue. Here is a mimal example that
shows that the main content pain will repaint its entire contents
during
scrolling. Seems like an issue with the paper-drawer-panel?
!DOCTYPE html
html
head
script
src=/bower_components/webcomponentsjs/webcomponents-lite.min.js/script
link rel=import
href=/bower_components/paper-drawer-panel/paper-drawer-panel.html
style
.maincontent {
background: #cf9a9a;
overflow: auto;
}
.sidebar {
background: white;
}
/style
/head
body
paper-drawer-panel
div class=sidebar drawer
/div
div class=maincontent main
div style=height:4000px/div
/div
/paper-drawer-panel
/body
/html
If you load that you'll see that the maincontent div will always
repaint in its entirety.
On Fri, Jul 24, 2015 at 2:30 PM Eric Bidelman ebi...@gmail.com
wrote:
Scrolling issues usually means poort interactions with css selectors
and style recalcs are causing large paints. That would be my guess.
That
doesn't have to do with templating or data binding but it's hard to
say
without seeing your app or knowing more about the code.
Another thing to try is use template is=dom-if to only stamp
initial DOM that you need. I've seen people create apps with
5000-7000 DOM
nodes on page load. There's never a good idea for any app.
On Fri, Jul 24, 2015 at 4:22 PM Aleem Mawani al...@streak.com
wrote:
Thanks for those.
Are there any polymer specific perf issues we should be aware of
with respect to data binding or templating? If there are perf issues
in
this area, would they be relatively easy to spot in the devtools?
On Fri, Jul 24, 2015 at 2:20 PM Eric Bidelman ebi...@gmail.com
wrote:
As with any web app, the Devtools Timeline is your best friend
when it comes to anything related to jank (rendering, scrolling,
paint
issues): https://developer.chrome.com/devtools/docs/timeline
The usual suspects are large paints on scrolling or doing extra
work (layout, etc). Be sure to turn on Show paint rects to see
where your
time is being spent:
https://developer.chrome.com/devtools/docs/rendering-settings
There's also a ton of great content at http://jankfree.org/ to
learn more.
On Fri, Jul 24, 2015 at 3:33 PM al...@streak.com wrote:
I'm writing a Polymer based app and at some point the UI has
gotten really slow to render and really slow to scroll.
Does anyone know of any resources or tips on the best way to
get started debugging polymer performance
[polymer-dev] Re: iron-list/ Uncaught RangeError: Invalid array length when setting items array.
Is there something different in this example
http://jsbin.com/facani/edit?html,output (apart from the css)?
On Friday, July 24, 2015 at 10:47:11 AM UTC-7, Kujako wrote:
Yes, bower.json shows version 1.0.1
On Friday, July 24, 2015 at 10:37:29 AM UTC-7, Emmanuel Garcia wrote:
Are you using the last version of iron-list (v1.0.1)? Here's your code
using the last version: http://jsbin.com/facani/edit?html,output
bower update or
https://github.com/PolymerElements/iron-list/releases/tag/v1.0.1
On Friday, July 24, 2015 at 9:16:32 AM UTC-7, Kujako wrote:
I'm trying to setup an iron-list using a local array for its data source.
dom-module id=“my-list
template
iron-list items={{myItems}} as=item indexAs=myIndex
template
div class=item{{item.name}}/div
/template
/iron-list
/template
script
Polymer({
is:’my-list',
properties: {
myItems: {
type: Array,
notify: true
}
},
addItem: function(item) {
this.push(myItems, JSON.parse('{name:'+item+'}'));
},
ready: function() {
this.myItems=[
{'name':'Taco'},
{'name':'Burger'},
{'name':'Fries'},
{'name':'Chips'}
];
}
});
/script
/dom-module
Everything works, but from the ready() method I get Uncaught
RangeError: Invalid array length. This seems to happen whenever the array
is set for the first time. While this does not impact operations from a
browser, Cordova stops on this error.
Any ideas as to how to suppress or prevent this error? Kind of running
blind as I can't find any example code to work off of.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
Polymer group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/441ef6bd-c2ee-4853-a4d8-bd73c68364e6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: iron-list/ Uncaught RangeError: Invalid array length when setting items array.
Are you using the last version of iron-list (v1.0.1)? Here's your code
using the last version: http://jsbin.com/facani/edit?html,output
bower update or
https://github.com/PolymerElements/iron-list/releases/tag/v1.0.1
On Friday, July 24, 2015 at 9:16:32 AM UTC-7, Kujako wrote:
I'm trying to setup an iron-list using a local array for its data source.
dom-module id=“my-list
template
iron-list items={{myItems}} as=item indexAs=myIndex
template
div class=item{{item.name}}/div
/template
/iron-list
/template
script
Polymer({
is:’my-list',
properties: {
myItems: {
type: Array,
notify: true
}
},
addItem: function(item) {
this.push(myItems, JSON.parse('{name:'+item+'}'));
},
ready: function() {
this.myItems=[
{'name':'Taco'},
{'name':'Burger'},
{'name':'Fries'},
{'name':'Chips'}
];
}
});
/script
/dom-module
Everything works, but from the ready() method I get Uncaught RangeError:
Invalid array length. This seems to happen whenever the array is set for
the first time. While this does not impact operations from a browser,
Cordova stops on this error.
Any ideas as to how to suppress or prevent this error? Kind of running
blind as I can't find any example code to work off of.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
Polymer group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/a5551a06-5d8c-4925-bfcb-93d183a1c195%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: iron-media-query events
That event has been renamed to *`on-query-matches-changed`*
e.g.
* iron-media-query*
*on-query-matches-changed=_onQueryMatchesChanged*
*query=media query*
*/iron-media-query*
On Monday, July 13, 2015 at 11:44:27 PM UTC-7, toduu wrote:
Anybody know why Iron-media-query does not have an event like
core-media-change in core-media-query. Also I was not able to understand /
use the new methods listed queryChanged and queyHandler. Any suggestions.
I have resorted to javascript window.addEventListener('resize', function()
{ -- to kick off layout change from horizontal to vertical.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
Polymer group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/7da7c9ce-9c4a-4638-b609-f79921ed455f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: iron-media-query events
That event has been rename to *`on-query-matches-changed`*
e.g.
*iron-media-query*
*on-query-matches-changed=_onQueryMatchesChanged*
*query=media query*
*/iron-media-query*
On Monday, July 13, 2015 at 11:44:27 PM UTC-7, toduu wrote:
Anybody know why Iron-media-query does not have an event like
core-media-change in core-media-query. Also I was not able to understand /
use the new methods listed queryChanged and queyHandler. Any suggestions.
I have resorted to javascript window.addEventListener('resize', function()
{ -- to kick off layout change from horizontal to vertical.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
Polymer group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/63470505-ac97-4442-b654-c7f85be0ebef%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
