Page MenuHomePhabricator

Define, Document (and test) Desktop and Mobile browser support for wikistats 2.0
Closed, ResolvedPublic5 Estimated Story Points

Description

Define, Document (and test) Desktop and Mobile browser support for wikistats 2.0

Event Timeline

mforns moved this task from Next Up to In Code Review on the Analytics-Kanban board.
mforns moved this task from In Code Review to In Progress on the Analytics-Kanban board.

Hey, after some cross-browser testing, here's the results:

Supported browsers

Wikistats2 should support the following browsers (by use, check: https://analytics.wikimedia.org/dashboards/browsers/#all-sites-by-browser/browser-family-and-major-hierarchical-view):

  • Last 2 versions of Google Chrome
  • Last 2 versions of Chrome Mobile
  • Last 2 versions of Mobile Safari
  • IE 11
  • Last 2 versions of Mozilla Firefox
  • Last 2 versions of Microsoft Edge

Supported browsers where Wikistats2 uses transpiling or polyfills

TRANSPILING:

  • Mobile Safari
  • IE 11
  • Microsoft Edge

POLYFILLS:

  • Google Chrome and Chrome Mobile (very few libraries - maybe not used by codebase!)
  • Mobile Safari
  • Mozilla Firefox (very few libraries - maybe not used by codebase!)
  • IE 11
  • Microsoft Edge

Browser tests

  • Google Chrome 58 tested on Ubuntu and Windows without issues
  • Chrome Mobile 58 tested on Android without issues
  • Mobile Safari TODO (will edit when done)
  • IE 11 tested on Windows 10 with problems, the site does not render and the console shows:
Object does not support property 'find'
var area = result.find(function () { ... });
  • Mozilla Firefox tested on Ubuntu without issues (site renders and works properly), but some warnings:
downloadable font: OS/2: bad linegap: -32 (font-family: "Dropdown" style:normal weight:normal stretch:normal src index:0) source: data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAA … AG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.
  • Microsoft Edge tested on Windows 10 without issues

Note: Firefox Mobile was also tested on Android with some viewport problems (viewport cuts out right part of Wikistats2). Opera was also tested on Ubuntu and broke with the same error as IE 11. Both of those browsers have a very small share of traffic (<1%), and were not included in the supported browsers because of that, but FYI.

Conclusion

Firefox warnings seem not critical, but IE 11 problem needs to be solved.
TODO Test Mobile Safari
TODO Dig into IE 11 problem and see if something can be done in Wikistats2 build to fix it.

Hey, I've been digging into the IE11 problem.

After implementing a couple methods for IE to work (find and assign - which fixed the initial issue), it turns out that Promises was not working either. I googled a bit and found out that, actually, babel-polyfills was in our npm package, but was not being imported (and hence bundled) :] so it was not used at all.

I added a single line in main.js import 'babel-polyfill';. And this fixed the issue in IE11 and also Opera. And I guess it will also solve the issues in Safari.

Final update for browser tests.
The following browsers are supported by Wikistats2
and have been tested with positive results after the babel-polyfill fix:

  • Last 2 versions of Google Chrome
  • Last 2 versions of Chrome Mobile
  • Last 2 versions of Safari
  • Last 2 versions of Mobile Safari
  • Last 2 versions of Mozilla Firefox
  • IE 10, IE 11 and Microsoft Edge

Did we deploy this code or we are still waiting on deployment?