Page MenuHomePhabricator

Search magnifying glass and placeholder text mashed together in Opera Mini extreme mode (all resolutions)
Closed, ResolvedPublic2 Story Points

Description

As a user of Opera Mini with extreme mode enabled via the browser settings
When I visit a page and attempt to search the magnifying glass and input placeholder text overlap.
Note: this does not happen with a spoofed user agent nor does it happen with extreme mode disabled.

As mentioned in {T140051#2466572} something's off kilter with the search magnifying glass and placeholder text in Opera Mini out of the gate. They're getting mashed together when observed on 15-July-2016 on en.m.wikipedia.beta.wmflabs.org (but not en.m.wikipedia.org...the train is coming, though).

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Nirzar claimed this task.Jul 18 2016, 4:56 PM
Jdlrobson updated the task description. (Show Details)Jul 18 2016, 5:11 PM

This task needs more discussion/mock and estimation before working on it, but we'll keep it in Needs Analysis on the sprintboard as the next thing to work on.

This is a regression and easy to fix.

Change 299575 had a related patch set uploaded (by Jdlrobson):
Do not apply horizontal padding on basic search interface

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

@Jdlrobson wait.. what is the fix? just removing the magnifying glass?

For tiny resolutions up to 240px:

For 320px and higher:

Works! thanks jon

Nirzar removed Nirzar as the assignee of this task.Jul 18 2016, 6:59 PM
Nirzar added a subscriber: Nirzar.
dr0ptp4kt set the point value for this task to 2.Jul 21 2016, 5:08 PM
phuedx added a subscriber: phuedx.Jul 21 2016, 5:49 PM

@Jdlrobson, @Nirzar: During testing, I noticed that the change removes the search icon in Opera Mobile at all resolutions, e.g. for an HTC Desire @ 480x800, an Amazon Kindle Fire @ 826x1234, etc. Is that the expected behaviour?

Nirzar added a comment.EditedJul 21 2016, 5:55 PM

@phuedx thanks for catching that. according to @Jdlrobson's comment above it shouldn't "for 320px and higher"

A check on http://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page?cb=foo1 from Opera Mini in Opera Mini mode (full page proxy server compression mode) on an iPhone 5c running iOS 9.3 suggests the issue persists.

@dr0ptp4kt: @Jdlrobson's change hasn't been merged yet…

Ah, okay, thanks! Looks like I was checking on something already in the -1 column! Should have checked Gerrit, too.

Change 299575 merged by jenkins-bot:
Do not apply horizontal padding on basic search interface

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

Opera mini on Android, visiting http://en.m.wikipedia.beta.wmflabs.org/

Doesn't seem to be fixed.

From Joaquin on IRC:
main page, Opera mini on Android 6 opera mini 18.0.2254

I tested this myself. with Opera Mini 18.0.2254 the search actually works with JavaScript (it seems to be Webkit based and behave like Opera browser). On older versions of Opera I do not see the magnifying glass overlap.

Is it possible that you tested this before the fix to T141571 got deployed?
Could someone have another go at sign off? This looks good to me.

en.m.wikipedia.beta.wmflabs.org produces the same mashed together stuff as before. Just checked a few minutes ago. This was Opera Mini in Opera Mini mode (probably called "extreme" mode if you're checking from Android).

Ok yep I can now replicate this in opera mini with extreme mode (that said extreme mode does warn that some websites may not work correctly). That said this is an issue on production too. The user agent has changed for more recent opera minis and it wasn't clear from the bug report which opera mini we were fixing for...

Jdlrobson added a comment.EditedJul 29 2016, 9:19 PM

Note I can't replicate this with user agent Opera/9.80 (Android; Opera Mini/18.0.2254/37.8773; U; en) Presto/2.12.423 Version/12.16. This particular problems seems to be a browser specific bug brought about when extreme mode is enabled.

Jdlrobson renamed this task from Search magnifying glass and placeholder text mashed together in Opera Mini to Search magnifying glass and placeholder text mashed together in Opera Mini extreme mode (all resolutions).Aug 1 2016, 5:18 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)

Given this only impacts "extreme mode" which itself comes with a disclaimer ( extreme mode does warn that some websites may not work correctly) I question the high priority (seems more normal to me), especially when you compare to T141680 which impacts all browsers.

I'm not sure what exactly the numbers add up to in terms of how many people see this particular issue on every pageview, as compared to the other one, which affects RTL searchers who have entered the funnel. They both look strange, though.

Let's enqueue the other one ahead of this one, presumably both slated for sprint 79 so we can pull them in as time avails itself in sprint 78.

Jdlrobson closed this task as Resolved.Aug 11 2016, 7:17 PM

This was never resolved but should have been.

I'm still seeing the same mashed together stuff, checking from Opera Mini in "Opera Mini" (equivalent of extreme mode) on iOS. What are you seeing?

Jdlrobson reopened this task as Open.Aug 16 2016, 3:08 PM
Jdlrobson lowered the priority of this task from High to Normal.
Jdlrobson removed a project: Patch-For-Review.
dr0ptp4kt removed dr0ptp4kt as the assignee of this task.Aug 30 2016, 4:15 PM

can we hide the magnifying glass for c grade? i was using android browser on gingerbread and the icon was mashed. i think we are investing a lot in fixing the icon

We can hide it for browsers where we don't run JS ((although that probably won't help Gingerbread. The icon is not generated the standard way - it is a background on an input which is probably causing a lot of these issues. I'd recommend using div.mw-ui-icon.mw-ui-icon-small. I would hope that would fix these issues.

@Jdlrobson - have we thought about how the new header will affect non-js browsers?

Nirzar added a comment.Feb 7 2017, 5:01 PM

@ovasileva yeah for non JS browsers the magnifying glass takes you to a special search page. i guess this bug will get solved with new implementation because we are removing the header searchbar altogether

@Nirzar - whoo! (leaving this open as a double-check)

Jdlrobson changed the task status from Open to Stalled.Feb 7 2017, 6:54 PM

Yup rolling this out will fix this magically. Setting to stalled to ensure nobody tries to work on this unnecessarily.

Krinkle changed the task status from Stalled to Open.EditedApr 29 2017, 12:51 AM

@Jdlrobson - have we thought about how the new header will affect non-js browsers?

Seems it is still broken in the new header.

(Opera Mini on iPhone, using the "Opera Mini" maximised mode).

It looks fine to me... In that it is functional ... which is acceptable given it's grade C. What am i missing?

Note the negative text indent doesnt work on this browser

It looks fine to me... In that it is functional ... which is acceptable given it's grade C. What am i missing?
Note the negative text indent doesnt work on this browser

Last I checked text-indent works fine in Opera Mini (both positive and negative values). http://caniuse.com/#feat=css-text-indent and https://operamini.tips/#/css-text-indent confirm this. The new CSS4 each-line or hanging keywords are not supported in Opera Mini, but no other browser supports those yet either.

If I inspect the search icon in Chrome with JavaScript disabled, and disable the text-indent rule from mw-ui-icon, the label is still invisible (as it should be). And instead the label of the hamburger menu becomes visible:

This didn't happen on Opera Mini, which is further confirmation that text-indent works fine.

Rather, the rule that makes the label invisible most of the time is #searchIcon input { color: transparent; }. Re-enabling the text-indent rule and, disabling the color: transparent rule re-creates the same rendering we saw previously in Opera Mini.

The fact that this color: transparent was added is probably because someone realised that text-indent does not apply to native input buttons. So text-indent doesn't actually work here in other browsers either. (Not supposed to.)

I'm kind of wondering why this button is here in the first place. If you want accessibility, you could turn the icon itself into a <button>, use a child element for the label (which supports text-indent), or use an aria-label or title attribute. Or keep the current html, but ditch the hidden <input> button and apply a role attribute to the link that currently represents a button. There's these and lots of other solutions to choose from.

Thanks for the detailed write up. Yes this makes sense. I got a little confused as the HTML has changed considerably so mixing in with the history of this task confused me a little.

This is somewhat related to T163049 and will be fixed by https://gerrit.wikimedia.org/r/349261

You should probably raise a separate bug for the overlap on Special:Search - as the input there is rendered via OOjs UI not MobileFrontend's libraries.

Jdlrobson claimed this task.May 1 2017, 6:32 PM
phuedx removed a subscriber: phuedx.May 2 2017, 7:30 AM

Change 349261 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Search button should not be wrapped in a link

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

Change 349261 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Search button should not be wrapped in a link

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

Jdlrobson reassigned this task from Jdlrobson to Krinkle.May 3 2017, 8:09 PM

Can you confirm this is fixed by the above patch? I don't have access to Opera Mini on iOS right now.

Krinkle closed this task as Resolved.EditedMay 3 2017, 8:17 PM

Seems it is still broken in the new header. (Opera Mini on iPhone, using the "Opera Mini" maximised mode).

Can you confirm this is fixed by the above patch? I don't have access to Opera Mini on iOS right now.

Unrelated to this patch. It seems that the color of the "Search" label changed to a light grey, which already makes it almost invisible.

Before the patch

betaprod
beta (high contrast mode for clarity)

After the patch

beta

The label is gone completely. As such, marking this as resolved.

However please note that there is now a new regression. The page is now rendered wider than it is supposed to be. (Note the wide gap towards the right)

This seems to have happened in the last 1-2 hours since I did the "Before the patch" testing. I can consistently reproduce it now.