search

ISG-ICS / cloudberry

Big Data Visualization
http://cloudberry.ics.uci.edu
91 stars 82 forks source link

The TwitterMap front-end hangs in IE 11 #281

Closed JavierJia closed 7 years ago

JavierJia commented 7 years ago

If we use IE to load the TwitterMap demo and once we zoom in the front-end will hangs and stop responding.

ShengjieXu commented 7 years ago

I tested on IE 11 today and the Twitter Demo runs perfectly. It seems like it's no longer an issue? image

JavierJia commented 7 years ago

I think the hangs happens when you zoom in.

chenlica commented 7 years ago

It happened to one of our colleagues, so it's critical to replicate it and fix it.

ShengjieXu commented 7 years ago

Screenshots in IE11

1 2 
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
twittermap

HTML1300: Navigation occurred.
twittermap

TypeError: Unable to get property '_leaflet_id' of undefined or null reference
   at Anonymous function (http://cloudberry.ics.uci.edu/assets/lib/leaflet/leaflet.js:6:597)
   at addLayer (http://cloudberry.ics.uci.edu/assets/lib/leaflet/leaflet.js:6:20817)
   at Anonymous function (http://cloudberry.ics.uci.edu/assets/javascripts/map/controllers.js:243:13)
   at m.prototype.$broadcast (http://cloudberry.ics.uci.edu/assets/lib/angularjs/angular.min.js:143:426)
   at Anonymous function (http://cloudberry.ics.uci.edu/assets/lib/angular-leaflet-directive/angular-leaflet-directive.min.js:36:30392)
   at m.prototype.$eval (http://cloudberry.ics.uci.edu/assets/lib/angularjs/angular.min.js:141:36)
   at safeApply (http://cloudberry.ics.uci.edu/assets/lib/angular-leaflet-directive/angular-leaflet-directive.min.js:35:8884)
   at j.prototype.fire (http://cloudberry.ics.uci.edu/assets/lib/angular-leaflet-directive/angular-leaflet-directive.min.js:36:30256)
   at Anonymous function (http://cloudberry.ics.uci.edu/assets/li
chenlica commented 7 years ago

Any clue about how to fix it?

ShengjieXu commented 7 years ago

The console output doesn't provide much information. I think it must have something to do with the zooming code in the map/controller.js. To resolve the compatibility issue, we might have to change some part of the code by following this link https://docs.angularjs.org/guide/ie

"To ensure your AngularJS application works on IE please consider":

  1. Use ng-style tags instead of style="{{ someCss }}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11 (the most recent version at time of writing).
  2. For the type attribute of buttons, use ng-attr-type tags instead of type="{{ someExpression }}". If using the latter, Internet Explorer overwrites the expression with type="submit" before AngularJS has a chance to interpolate it.
  3. For the value attribute of progress, use ng-attr-value tags instead of value="{{ someExpression}}". If using the latter, Internet Explorer overwrites the expression with value="0" before AngularJS has a chance to interpolate it.
  4. For the placeholder attribute of textarea, use ng-attr-placeholder tags instead of placeholder="{{ someExpression }}". If using the latter, Internet Explorer will error on accessing the nodeValue on a parentless TextNode in Internet Explorer 10 & 11 (see issue 5025).
chenlica commented 7 years ago

@HotLemonJuice Please check how easy we can fix it. If it's hard, we can at least show a warning message "TweetMap currently does't support IE."

JavierJia commented 7 years ago

circumvent by showing an alert for IE #377