Page MenuHomePhabricator

Searchfield black in Android 2 and other older browsers
Closed, ResolvedPublic


Black bar over the searchbox and impossible to search.

Maybe because of the Inline SVG? Not supported by all browsers.

Android 2.X

Reported via mail:;TicketID=8344411#

Event Timeline

Steinsplitter raised the priority of this task from to Needs Triage.
Steinsplitter updated the task description. (Show Details)
Steinsplitter added a project: Mobile.
Steinsplitter added a subscriber: Steinsplitter.
Florian added a project: Readers-Web-Backlog.
Florian set Security to None.
Florian added a subscriber: Florian.

Reproduced on HTC Wildfire S (Android 2.3):

IMAG0461.jpg (3×5 px, 3 MB)

(sorry for the picture with camera, but i don't want to install an app to take screenshots and Android 2.3 has no built-in function for that :()

@Jdlrobson: Probably a problem with our recent move of mw-ui-icon to stable?

This actually looks like it might be the toast notification. Maybe something broke with our position fixed support?

The svgs /should/ degrade to pngs where not supported.

@kaldari could you check the android 2.3 in the office to see if you can replicate?

You can replicate this using BrowserStack or the Android Emulator. The hamburger icon (and, presumably, its container element) is filling the header.

Also, I'm fairly certain it isn't SVG/PNG related as the main menu icons are working just fine.

@phuedx glad we can replicate it now. I'm guessing to debug we should turn off certain modules until the problem goes away.

I wonder if these rules are causing the problem since these are unique to the header:

vertical-align: middle;
display: table-cell;

I can replicate on enwiki and beta labs but not locally... could another extension be introducing this css regression or is editor's css in MediaWiki:Common.css ?

Three weeks later: Is anybody looking into this?

Problem also brought up in

I can also reproduce this problem on the Nokia N950's default browser (that's no Android but probably also ancient enough).

I'll take another look - but I couldn't reproduce it locally last time...

Okay so I can confirm it's the usage of display: table-cell on the icons.
Adding this rule:
.header > a, .header > form, .header > div { display: inline-block; }
fixes the issue with the icon but breaks the vertical centering.
Very strange.

i've added some borders around the table-cell elements but the pseudo elements stretch out to 100% width of the page rather than the width of the table element itself

Screen Shot 2015-06-08 at 3.52.49 PM.png (232×302 px, 44 KB)

Not sure why I can't replicate locally..

So it seems absolutely positioned elements do not fair well in display:table-cell
mmm. Not sure how to go about fixing this sadly.

This can be used to rectify the issue but it stops the header taking up full width

.header > a, .header > form, .header > div {
  float: left;
  display: block;
  height: 100%;
  padding: 1em !important;

Any ideas welcomed.

As I hoped I made clear in my initial report. my handheld device is a Blackberry Torch not an Android. I do not know if that makes a difference.
Blackberry 9800 6.0 Bundle 2647

My Provider is ATT.

A thought from an amateur. Is it possible to provide a link to a Search Page from the mobile sidebar menu (Home, Random, Nearby, Watchlist , Settings, Log in) that appears when I click the black bar that covers the search box?

As it is to do a search I have to go to desktop version and then zoom on the search-box and enter my search. When the correct page is found I then scroll to the bottom to reenter mobile so I can read it.

Thank you for your assistance.

Hi @Lifeofthemind yes that is totally clear but given that you are describing the same problem the solution will be the same. I'll update bug title!

Jdlrobson renamed this task from Searchfield black in Android to Searchfield black in Android 2 and other older browsers.Jun 9 2015, 2:10 PM

Change 217068 had a related patch set uploaded (by Jdlrobson):
Fix black bar in header on older devices

@bmansurov could you take a look at the alpha header and fix it up in the above patchset? I don't want to block on an experimental feature given the severity of this bug but if we can fix it that would be great (I lack the expertise on this feature).

@Jdlrobson, why do you think your patchset needs a fix up, doesn't it solve the problem already? If not, could you give more info about where you got stuck?

It fixes the issue fine, but I think it's not compatible with the alpha menu in tablet mode:

Screen Shot 2015-06-09 at 3.22.13 PM.png (111×924 px, 15 KB)

OK, thanks. I'll take a look at it.

Ping for reviews - this is super important and I want to get it SWATed tomorrow.

The patch causes a minor issue with the notifications icon. When the notifications bell is clicked, it normally turns into a spinner, the notifications module loads, and then the drawer slides open. Now it does the same thing, but when the icon turns into a spinner, it is now in a weird position (higher than the bell was) and the entire header becomes taller. See screenshots from Firefox:

Screen Shot 1.png (539×996 px, 239 KB)

Screen Shot 2.png (560×997 px, 239 KB)

Confirmed that issue in above comment also happens in iOS Safari.

Patch looks good but I've been vagranted today so can't test (so no merge). Sorry.

Change 217068 merged by jenkins-bot:
Fix black bar in header on older devices

Change 217735 had a related patch set uploaded (by Jdlrobson):
Fix black bar in header on older devices

Change 217735 merged by jenkins-bot:
Fix black bar in header on older devices

I can confirm this is now fixed on all production wikis.

It works. Thank you.
Sent via BlackBerry by AT&T