Define, Document (and test) Desktop and Mobile browser support for wikistats 2.0
Description
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | None | T120037 Vital Signs: Please provide an "all languages" de-duplicated stream for the Community/Content groups of metrics | |||
Resolved | None | T120036 Vital Signs: Please make the data for enwiki and other big wikis less sad, and not just be missing for most days | |||
Resolved | odimitrijevic | T130256 Wikistats 2.0. | |||
Resolved | None | T160370 Initial Launch of new Wikistats 2.0 website | |||
Resolved | mforns | T170457 Define, Document (and test) Desktop and Mobile browser support for wikistats 2.0 | |||
Resolved | • fdans | T170458 Set up continuous integration for wikistats 2.0 UI | |||
Resolved | mforns | T170459 Cleanup Routing code |
Event Timeline
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