iron-media-query binding on initial loading into smaller viewport

[Kelly St. John]

Has anyone run into issues where iron-media-query doesn't seem to be setting the query-matches bound property on initial loading of the site? In other words, if the site is initially loaded in a smaller viewport (such as on mobile or on desktop in smaller window), various local DOM elements are not being hidden using

 

hidden$="{{_smallScreen}}"

However, if the site is initially loaded in a larger viewport and then subsequently reduced in size, the iron-media-query hides the local DOM elements appropriately.  Perhaps something to do with initial value of element's _smallScreen property or maybe I should perform some action on a loading lifecycle event?

FYI, I have posted on SO as well:  http://stackoverflow.com/questions/32723163/iron-media-query-not-hiding-local-dom-elements-if-initially-loaded-in-smaller-vi

[Kelly St. John]

Looks like someone has reported this issue on GitHub for iron-media-query:  https://github.com/PolymerElements/iron-media-query/issues/15

Still, any comments or recommendations?

[Kelly St. John]

Any way around this issue?  The iron-media-query's bound property is not being set on initial page load.  An issue has been reported on GitHub, but I see this as a pretty serious problem, and I'm frankly surprised it has not yet been addressed.  It was not an issue using Polymer 0.5, and it basically prevents the usage of polymer sites on mobile.

I am attempting to hide some local DOM when the site loads in a smaller viewport using hidden$ attribute on various tags as follows:

hidden$={{_smallScreen}}

_smallScreen is a declared property in the element in question.  I've already tried declaring the property with a default value as well, to no avail (i.e. _smallScreen: {type: Boolean, value: false} )

The site reacts just fine once it has been loaded, and adjusting the viewport size hides and shows the local DOM elements as expected, it just does not do so on the initial page load.  Hence, it is a much bigger problem on mobile, as you cannot enlarge the viewport and then size it back down to get it to respond and hide elements properly, like you can do on desktop.  The problem can be replicated using developer tools emulation in Chrome.

Could really use some advice on this one!

[Eric Bidelman]

Hi Kelly, I've added a code-yellow label to https://github.com/PolymerElements/iron-media-query/issues/15. We'll be looking at it in our next round of fixes.

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/b83a9429-6e4a-4e70-bea8-1fe7b7b29404%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.