Page MenuHomePhabricator

Cross-browser support - styling
Closed, ResolvedPublic3 Estimated Story Points

Description

There are some styling issues with IE8.
We have to list them here more precisely and fix those.

This ticket was originally larger - but we split off the JS issues here: https://phabricator.wikimedia.org/T126052

Event Timeline

JGirault raised the priority of this task from to High.
JGirault updated the task description. (Show Details)
JGirault added subscribers: MSyed, Ironholds, JGirault and 3 others.

screenshots!

Screen Shot 2016-02-03 at 3.44.29 PM.png (1×2 px, 762 KB)
android 4, pretty good
Screen Shot 2016-02-03 at 4.43.09 PM.png (1×2 px, 3 MB)
android 2.3, shockingly still works
Screen Shot 2016-02-03 at 4.44.02 PM.png (1×2 px, 2 MB)
iOS 3, still using an original iPhone? good luck.
Screen Shot 2016-02-03 at 3.42.03 PM.png (1×2 px, 1 MB)
IE7 pretty bad
Screen Shot 2016-02-03 at 3.42.50 PM.png (1×2 px, 1 MB)
IE8 slightly off
Screen Shot 2016-02-03 at 4.46.10 PM.png (1×2 px, 1 MB)
Windows Phone 8.1, no worries here

.
Notes:

  • IE8 has issues when trying to select a language.
  • We shouldn't be serving JS to dinosaurs like IE7 or even Android 2.3 or iOS 3.
  • More detailed feature detection should be used to determine who gets the JS and who doesn't.

CSS wise there are some spacing issues between the search input and search button on older androids,
IE7 doesn't look right at all, but that should be served without JS.

The biggest challenge I see on this front is implementing some sort of feature detection to serve JS to the devices
that support the features we use.

Hi @Jdrewniak, I have a card (T124827) in the Analysis project that will help to address the issue of how much the older browsers are used.

Hopefully, there isn't a majority of use on those older browsers and with the upcoming analysis, we can effectively block JS from going to them.

debt lowered the priority of this task from High to Medium.Feb 4 2016, 12:18 AM
debt set Security to None.
debt assigned this task to Jdrewniak.
debt renamed this task from Cross-browser support - styling and JS to Cross-browser support - styling.Feb 5 2016, 7:45 PM
debt updated the task description. (Show Details)
debt edited a custom field.

Change 269673 had a related patch set uploaded (by Jdrewniak):
Improving cross-browser CSS - Adding autoprefixer - fixing a templating bug in typehead

https://gerrit.wikimedia.org/r/269673

Just so everyone doesn't have to click through browserstack like I did:

Screen Shot 2016-02-10 at 8.01.46 PM.png (1×2 px, 791 KB)
IE6, let's be real here...
Screen Shot 2016-02-10 at 7.51.34 PM.png (1×2 px, 913 KB)
IE 7, CSS ok, no JS
Screen Shot 2016-02-10 at 1.20.48 PM.png (1×2 px, 1 MB)
IE 8, works
Screen Shot 2016-02-10 at 7.54.31 PM.png (1×2 px, 2 MB)
iOS 3, works
Screen Shot 2016-02-10 at 2.13.39 PM.png (1×2 px, 2 MB)
Android 2.3, works
Screen Shot 2016-02-10 at 8.00.47 PM.png (1×2 px, 1 MB)
Windows Phone 8.1 ,works
Screen Shot 2016-02-10 at 2.39.19 PM.png (1×2 px, 1 MB)
Safari 5, works
Screen Shot 2016-02-10 at 8.04.32 PM.png (1×2 px, 949 KB)
Firefox 10, works
Screen Shot 2016-02-10 at 8.06.05 PM.png (1×2 px, 1 MB)
Opera 12, works

thanks, @Jdrewniak - the IE6 doesn't look quite as bad as I had expected ;)

It seems that the recent changes (due to UI standards) have broken styling a little. We should check all these devices again.

Change 269673 merged by jenkins-bot:
Improving cross-browser CSS - Adding autoprefixer - fixing a templating bug in typehead - disabling javascript in IE6

https://gerrit.wikimedia.org/r/269673