mapsplugin/cordova-plugin-googlemaps

setDiv breaks fixed JQM headers and footers in current version

ggiordan opened this issue · 2 comments

ggiordan commented

I'm submitting a ... (check one with "x")

  • question
  • [ X] any problem or bug report

OS: (check one with "x")

  • [X ] Android
  • [ X] iOS
  • Browser

cordova information: (run $> cordova plugin list)

This version works

D:\mapdemo>cordova plugin  list
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-whitelist 1.3.4 "Whitelist"

This version does not

D:\mapdemo>cordova plugin  list
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-whitelist 1.3.4 "Whitelist"

Current behavior:

In an app that uses JQM, calling map.setDiv() causes fixed page header and footer to 'detach' and start scrolling.

When the app starts up, the map is displayed properly and scrolling on page works as expected. That is, the header and footer stay in place when the app is scrolled up and down.

calling setDiv(null) correctly removes the map
calling setDiv(map_div) to put the map back in the div puts the map back. BUT then the header and footer start scrolling with the whole page.

I also tried the multiple_maps branch, this shows the issue when the map is created initially (no need to play with the div)
It also seems to do other damage to the page too.

Expected behavior:
after putting the map back on the page, the header and footer should retain their fixed positions and not scroll with the page.

Screen capture or video record:
I captured and attached both working and broken versions

Broken (2.7.1): https://youtu.be/t6yfa-Tx06Y
Working (2.6.2): https://youtu.be/Yjrt46VO5G4

Related code, data or error log (please format your code or data):
This is a sample project that shows the issue. Depending on screensize, you may need to orient the device in landscape

https://github.com/ggiordan/mapdemo

   var setDivButton = document.getElementById("doSetDiv");
    setDivButton.addEventListener("click", function () {
        console.log("Click!");
        var myDiv = map.getDiv();
        if (myDiv) {
            console.log("clear div");
            map.setDiv(null);
        }
        else {
            console.log("set div");
            map.setDiv(document.getElementById("page1map"));
        }
    });

Support this plugin activity
I most certainly will!! Thanks for the great plugin / help!

ggiordan commented

I've been doing a lot of digging, it seems that this line causes the problem. (Map.js:838)
document.body.style.transform = 'rotateZ(0deg)';
I commented it out and the problem seems to go away.
I do not yet know what problems get introduced by doing that.
I checked on both Android and iOS, without the line, there is no problem.

  • 👍2
wf9a5m75 commented

Thank you for the report. I see. document.body.style.transform = 'rotateZ(0deg)'; could be no longer necessary. I will check this later

  • 👍2