google-map element in hidden state

[piotrdubiel]

Recently I had a problem with using google-map element inside core-animated-pages. I have layout like this:

<section is="list">
   (...)
</section>
<section id="details">
    <google-map></google-map>
</section>

Initially #list is selected, but when I select #details, map shows up in weird state.

I suspect that it's because map element renders when its parent has set display: none;
If I change

::content > *:not(.core-selected):not([animate]) {
  display: none !important;
}

to

::content > *:not(.core-selected):not([animate]) {
   visibility: hidden !important;
}

in core-animated-pages.css, then everything is ok.
What's the best approach to fix this?

[ebidel]

This is related to GoogleWebComponents/google-map#33

[morethanreal]

core-animated-pages makes both pages visibility:visible to prepare the animation before transitioning. Perhaps it should fire an event there to let the client do something if needed.

[ebidel]

Looks like we might need an event. If that's valuable in the general case, it would help the maps issue. It spawns from http://stackoverflow.com/questions/4700594/google-maps-displaynone-problem.

Maps is tricky because the parent element needs a fixed height. There's no good way to detect when the map's parent becomes visible. I got something working by polling if .offsetParent in rAF callbacks, but that's not ideal. If core-animated-pages were to fire an event, the client can call mapEl.resize() to ensure the map is displayed properly.

[morethanreal]

I added the core-animated-pages-transition-prepare event in e18d5bf.

[ebidel]

Thanks @morethanreal.

@piotrdubiel I believe this is enough to work around the issue. Can you test and close if it's adequate?

[piotrdubiel]

Thank very much you, resizing map on event solved the problem.