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.
On Thu, Sep 24, 2015 at 12:30 PM Kelly St. John <[email protected]> wrote: > 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! > > > > On Tuesday, 22 September 2015 14:26:07 UTC-7, Kelly St. John wrote: >> >> 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? >> >> >> On Tuesday, 22 September 2015 11:02:58 UTC-7, Kelly St. John wrote: >>> >>> 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 >>> >>> >>> 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/b83a9429-6e4a-4e70-bea8-1fe7b7b29404%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/b83a9429-6e4a-4e70-bea8-1fe7b7b29404%40googlegroups.com?utm_medium=email&utm_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 stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCBpDPOvW6Vvzo8-1K-HeJjty2u5GNTOSoxXiwFAvhEG9A%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
