Page MenuHomePhabricator

Icons appear blurred in new footer on Opera Mini and Edge
Closed, InvalidPublic

Description

The clock icon appear blurry on the following devices:

  • Edge 14 on Windows 10

  • Opera Mini 8.0.3


Previously fixed

  • Arrow not rotated on Android 2.x (fixed by using 2d transform)
  • Arrow not rotated in Opera Mini (fixed by hiding for non-js browsers)

Previously reported:

  • Android Browser 2.3 on an emulated Samsung Galaxy S2


Note well the orientation of the chevron on the right. Edit: It's pointing DOWN!!1

Event Timeline

Jdlrobson moved this task from Needs Analysis to To Do on the Reading-Web-Sprint-79-Uh-oh board.
phuedx renamed this task from Chevrons appearing blurred in new footer to Icons appear blurred or incorrect in new footer.Aug 26 2016, 5:50 PM
phuedx updated the task description. (Show Details)

Change 306963 had a related patch set uploaded (by Jdlrobson):
Use more widely supported 2d transform for chevron rotate

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

Change 306970 had a related patch set uploaded (by Jdlrobson):
Hide chevron in last modified bar for non-js users

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

The chevron is pointing down due to use of the CSS rule rotateZ(-90deg)

ANDROID: Fixed
Using vendor prefixed rotate will fix this for Android 2.3 browser (see patch).

IE:
I can replicate this but can't debug as developer tools crash my emulator every time I try to load them. I suspect this is an issue with the new implementation of mw-ui-icon-small however and IE10 - https://thatemil.com/blog/2015/03/15/sizing-svg-background-images-in-internet-explorer/ - should we investigate this separately in another task?

Opera Mini: WONTFIX.
I can't test Opera Mini but I'm pretty sure it doesn't support any css transforms. Thus only possibility is hiding it (I've submitted a follow up to do that if that's an option) - but if we do that I'd rather do that as part of a big Opera Mini specific overhaul (we have many other problems with that browser).

@jhobs can you test https://gerrit.wikimedia.org/r/#/c/306963? The code looks good, but I am not able to test due to my local MediaWiki installation. Thanks!

jhobs removed jhobs as the assignee of this task.Aug 26 2016, 8:43 PM

@bmansurov LGTM, but I can't +2.

@jhobs, btw I assume you tested it on Android 2.3, right?

Change 306963 merged by jenkins-bot:
Use more widely supported 2d transform for chevron rotate

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

I can't tell on the resolution for Opera Mini compressed, but the icon looks clipped in Opera Mini compressed. Does its resolution look right to you in the screenshot I took several minutes ago?

It didn't seem to matter whether images were set to Low or High compression.

For a frame of reference here's what I was just seeing Safari on an iPhone 5c iOS 9.3.

Nirzar added a comment.EditedAug 26 2016, 10:42 PM

with all these bugs. should we just hide the icons for low grade browsers?

i didn't know the icons would cause so many tasks :(

Change 306970 merged by jenkins-bot:
Hide chevron in last modified bar for non-js users

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

The chevron is pointing down due to use of the CSS rule rotateZ(-90deg)
Opera Mini: WONTFIX.
I can't test Opera Mini but I'm pretty sure it doesn't support any css transforms. Thus only possibility is hiding it (I've submitted a follow up to do that if that's an option) - but if we do that I'd rather do that as part of a big Opera Mini specific overhaul (we have many other problems with that browser).

Be careful not to be blinded by your own solution – this happens to me… a lot…

The simplest solution that supports the largest variety of browsers is to create a new icon for a chevron pointing to the right in LTR, which is then flipped automatically in RTL. For sure, rotating a pre-existing icon saves a little bandwidth but has an increased maintenance cost, which is something we very rarely take into account.

@phuedx we purposely rotate the toggle chevron to avoid this bandwidth issue (this is not an issue in Opera Mini as when we don't load JS the toggle icon doesn't show)

I'm wary of adding an additional icon to top loaded css and reducing first paint for this issue alone. It doesn't seem like a critical UI element imo.

with all these bugs. should we just hide the icons for low grade browsers?
i didn't know the icons would cause so many tasks :(

(So let's just follow this advice)

I'm wary of adding an additional icon to top loaded css and reducing first paint for this issue alone. It doesn't seem like a critical UI element imo.

Out of curiosity, what's the size of a optimised (svgoed), compressed SVG and PNG? How many additional bytes of compressed CSS would we deliver to the browser?

@dr0ptp4kt Can we resolve this? Otherwise it needs to be carried over to Reading-Web-Sprint-80-V-for-Vandalism

Yurik removed a subscriber: Yurik.Aug 29 2016, 5:29 PM

I believe it needs to be brought into sprint 80 as the sprint's well underway.

@Nirzar, was the intent to have both the chevron and the clock icon suppressed, or just the chevron? Presently in Opera Mini with compression I only see the chevron suppressed on en.m.wikipedia.beta.wmflabs.org in the beta channel.

As it is, in Opera Mini with compression turned on the clock icon is clipped, which isn't I think what's intended.

If the clock icon was supposed to be suppressed, then this task should be carried into sprint 80 and a follow on patch should be submitted for as much on this same task.

If the clock icon wasn't supposed to be suppressed, then I believe either (a) this task should be Resolved and a new task created to fix the clipped icon, or (b) this task should not be resolved until the clipped icon is fixed.

I'm wary of adding an additional icon to top loaded css and reducing first paint for this issue alone. It doesn't seem like a critical UI element imo.

Out of curiosity, what's the size of a optimised (svgoed), compressed SVG and PNG? How many additional bytes of compressed CSS would we deliver to the browser?

So firstly I made a mistake - this would introduce 4 new icons - 2 new icons because of the additional need to support RTL and both of these 2 icons would need variants for when the article is fresh and when it is not.

To answer your question I created a flipped version of the arrow and I ran it through the svg optimiser.

The css file was 7050 bytes before, but with the 2 new new icons it was 10174 bytes so that's 3124 bytes - 1562 per icon. No idea if that matters after gzipping but certainly complicates the code base (3 assets would need updating on any change to that icon).

@Jdlrobson confused. what is the solution that is being discussed? it's not in task description or hard to find in comments. the task description states the problem?

going out on a limb I'm guessing we are talking about removing both clock and chevron from Opera mini. and it seems chevron doesn't have big problem?

Here are possible solution for opera mini. I'm okay with any of these in order of preference

  • Both icons look super sharp and work like any other browser
  • Clock doesn't show but unclipped sharp chevron shows
  • Both icons don't show up

Just to note: these are extra affordances added and they don't take away any core funtionality. we can put this under graceful degradation.

Up to you @dr0ptp4kt for evaluative the effort. if removing is the simplest solution, lets do that.

@Nirzar sorry for confusion.
The issue is in Opera Mini we currently hide the chevron but the clock icon is a little blurred. Adam wants to know whether we should hide the clock as well or leave it as is or explore fixing it.

It sounds from your reply that the ideal would be we work out what blurs this icon and if that's not hide it.

@dr0ptp4kt @MBinder_WMF we should probably estimate this card. Resolving the unblurriness will be tricky, hiding will be messy.

Jdlrobson renamed this task from Icons appear blurred or incorrect in new footer to Icons appear blurred in new footer.Aug 30 2016, 11:16 PM
Jdlrobson reassigned this task from Nirzar to dr0ptp4kt.
Jdlrobson updated the task description. (Show Details)

flagged for estimation

@Jdlrobson yeah but again, if it's too much trouble and time to do 1st preferences, feel free to do 2 or 3 on that list. as i said they are extra affordances.

Jdlrobson renamed this task from Icons appear blurred in new footer to Icons appear blurred in new footer on Opera Mini and Edge.Aug 31 2016, 9:13 PM
Jdlrobson removed a project: Patch-For-Review.
dr0ptp4kt removed dr0ptp4kt as the assignee of this task.Sep 1 2016, 9:25 PM

@ovasileva
Can we get a priority on this?

MBinder_WMF triaged this task as High priority.Sep 12 2016, 4:38 PM

Update:
Footer no longer blurry


Language button VERY blurry

Easiest thing to do is simply hide the search icon when JS is disabled

Reproduced on Samsung-SM-J120A Android 6.0.1 on Opera 42

and Android Browser

Also reproduced on the web with Edge 14.14393 Windows 10

and Opera 43

The clock icon still looks disabled in all environments.

Sorry, I'm a little late to the party on this one, but it appears there are a number of issues covered in this ticket.

Blurry icons in the footer - Appears to be fixed, right?

Blurry Language icon - Appears to the fixed.

Image clipping - I was able to reproduce this only with the Android 2.3 - Opera Mobile 11.50 and Android 4.0 - Opera Mobile 11.50. I did not see clipping on any other android/browser combination. Image below. Should this be a separate ticket?

Grayed icons - I am unclear on whether this is a bug. Are they supposed to be lighter in color?

I tried a number of android versions and opera mobile browsers.
Clipping on Android 2.3 and 4.0

Language Icon looks ok

Footer icons looks ok

ovasileva closed this task as Invalid.Mar 6 2017, 3:28 PM

Could not reproduce, closing this for now.

Opera Mini on Android 4 looks fine if you have Extreme data savings disabled. I think this is fine, except for the Android 2 problems. Android 2 is right now a 0.36% though, so I'd say we can live with those clippings.