Query not applied to initial page load

[suryagaddipati]

!queryMatches is not triggered with initial page load .

https://elements.polymer-project.org/elements/iron-media-query?view=demo:demo/index.html

this page text is empty if you load it on iphone emulator for example.

Not sure if this is expected behavior.

The workaround is to use two matchers without the !queryMatches

[jsvcycling]

I'm having this same problem. Can you post some sample code as to how to got around it? I can't seem to find a working workaround.

[jsvcycling]

Nevermind, I misread your workaround and didn't understand it at first.

For future reference, here's how @suryagaddipati's workaround looks like in code:

<template is="dom-bind">
    <iron-media-query query="(max-width: 768px)" query-matches="{{smallScreen}}"></iron-media-query>
    <iron-media-query query="(min-width: 768px)" query-matches="{{regularScreen}}"></iron-media-query>

    <template is="dom-if" if="{{smallScreen}}">
        <p>This is a small screen.</p>
    </template>

    <template is="dom-if" if="{{regularScreen}}">
        <p>This is a regular screen.</p>
    </template>
</template>

[vorotech]

Another workaround that worked for me is to set default false value on the app object.

app.smallScreen = false;

iron-media-query will override property if media width matchs the query specified and your bindings will work correctly in both cases.

[Sinjins]

+1 Running into the same problem. When you say "set default false on app object" @vorotech (or @suryagaddipati), do you mean set the databound property (smallScreen in this example) in the element's 'ready' event using js? What if this isn't at the 'app' level per say, but rather the iron-media-query handling is done within a nested polymer element? I've also tried setting a default value of false in the element's property declaration as follows, to no avail: smallScreen: {type: Boolean, value: false}

ps: In my situation, I'm not using a dom-if template. I am simply hiding or showing various Local DOM elements using hidden$={{smallScreen}}

[Sinjins]

This is causing me all sorts of issues. Any other suggestions given my situation above? @notwaldorf perhaps?

[blasten]

This sounds like a timing issue; however I couldn't repro the issue. tested in chrome, mobile safari, safari, firefox. Maybe we fixed this issue in Polymer a long time ago? Could you guys send a code that reproduces the issue?

[Sinjins]

@blasten I've been busy trying to get you a jsbin demonstrating replication of this issue. Initially, I was having some trouble replicating in jsbin, but I think I might be on the right track now. It appears it could have something to do with having the hidden$={{smallScreen}} applied on a tag inside an iron-list templated item. If I remove the iron-list, the issue of the iron-media-query not working on initial page load goes away. I'll continue down this rabbit hole to try to get you a jsbin (or perhaps even determine root cause), but wanted to let you know in the meantime, in case something comes to your mind or you can suggest what might be causing the problem with the iron-media-query not playing well with iron-list on initial page load.

[Sinjins]

Ok, here is the reproduction of the issue in jsbin: http://jsbin.com/vapopa/1/edit?html,output
The problem seems to raise its ugly head when utilizing iron-ajax call to return array of items that are then used to bind to iron-list items. In this scenario, trying to use iron-media-query to show or hide tags within the list item template doesn't work on the initial page load / iron-list items binding time. It will respond once the page is loaded though (i.e. if you scale viewport size after the page has loaded things will disappear/appear appropriately). Its just the first page view that is shown on the initial page load/iron-list items binding that is the issue. This certainly causes a problem in mobile, especially.

[blasten]

@Sinjins This issue is confirmed, but I'm moving it to PolymerElements/iron-list#107. Feel free to reopen this issue if you have a repro code using iron-media-query only.