Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tiles do not show correctly in IE when map is part of neon-animated-pages #62

Open
FranzThomsen1089 opened this issue Jan 19, 2016 · 3 comments
Open

Tiles do not show correctly in IE when map is part of neon-animated-pages #62

FranzThomsen1089 opened this issue Jan 19, 2016 · 3 comments

Comments

@FranzThomsen1089
Copy link

I have boiled my problem down to whats shown below

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
    <link rel='import' href='bower_components/polymer/polymer.html'>
    <link rel='import' href='bower_components/paper-styles/paper-styles.html'>
    <link rel='import' href='bower_components/neon-animation/neon-animated-pages.html'>
    <link rel='import' href='bower_components/neon-animation/neon-animatable.html'>
    <link rel='import' href='bower_components/leaflet-map/leaflet-map.html'>
</head>
<body unresolved>
    <dom-module id='base-page'>
        <template>
            <neon-animated-pages id="pages" class="flex" selected="0">
                <neon-animatable>
                    <leaflet-map style='height:1000px;width:1000px'></leaflet-map>
                </neon-animatable>
            </neon-animated-pages>
        </template>
    </dom-module>
    <script>
        HTMLImports.whenReady(function() {Polymer({
            is: 'base-page'
        });});
    </script>
    <base-page></base-page>
</body>

When leaflet is part of a neon-animated-pages, the tiles do not show correctly in IE. Please someone help me ... @nhnb any idea about the issue?. Thanks

This may be related to the othe rissue I have posted earlier about the map not displaying correctly when part of iron-pages

Thanks and Cheers
@FranzThomsen1089
Copy link
Author

It seems if I call invalidateSize() in the load event I can givee it a shake. Is this something that would male sense to bake into the element somehow?

@lolive
Copy link

lolive commented Jan 4, 2018 •
edited

I think I have a similar problem when my <leaflet-map> is part of a Bootstrap modal.
Could you elaborate on how you implemented a solution with the load event?

@FranzThomsen1089
Copy link
Author

FranzThomsen1089 commented Jan 7, 2018 •
edited

In the observer for selectedPage in below

<neon-animated-pages selected='[[selectedPage]]' entry-animation='fade-in-animation' exit-animation='fade-out-animation'>

I call this.$.map.map.invalidateSize(); when I am on my map page

<neon-animatable page='Map'>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lolive @FranzThomsen1089