Page MenuHomePhabricator

Magnifying glass misaligned in Firefox on the language switcher overlay
Closed, ResolvedPublic2 Story Points

Description

  • How it should be (chrome):

  • How it is broken (firefox):

AC

  • Vertical alignment of the magnifying glass is middle as in Chrome
  • Spacing between the magnifying glass and the placeholder text is as in Chrome

Suggested verification, RTL+LTR, Landscape+Portrait to verify it's working plus verify non-regression with the fix:

  • Android 2.3 Browser phone form factor
  • Android 4.x/5.x/6.x Chrome phone form factor
  • Android 4.x/5.x/6.x Chrome tablet form factor
  • iOS 9.3 iPhone Safari
  • iOS 9.3 iPad Safari
  • Opera mobile (not mini) Android 4+ phone form factor
  • UC browser (not mini) Android 4+ phone form factor
  • Windows 7.5+ Phone IE
  • Desktop Firefox
  • Desktop Chrome
  • Desktop Safari
  • Internet Explorer 11

Event Timeline

Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJul 11 2016, 11:32 AM

Can you add the Firefox version too?

dr0ptp4kt triaged this task as High priority.Jul 11 2016, 5:13 PM
dr0ptp4kt set the point value for this task to 2.Jul 13 2016, 5:15 PM
dr0ptp4kt updated the task description. (Show Details)Jul 13 2016, 5:19 PM
phuedx claimed this task.

I've picked this up as it's small enough that I can (hopefully) fit it into my current work schedule.

phuedx added a comment.EditedJul 19 2016, 10:00 AM

In Firefox (47.0.1) on OS X El Capitan I see the following in production and on the Beta Cluster respectively:


N.B. that the magnifying glass is vertically centred but the space between it and the placeholder text of the search input is slightly less than that in Chrome.

phuedx added a comment.EditedJul 19 2016, 1:04 PM

N.B. that the magnifying glass is vertically centred but the space between it and the placeholder text of the search input is slightly less than that in Chrome.

This is due to a slight difference in the treatment of the placeholder text between Firefox and other browsers – I've seen this in Chrome (51.0.2704.106) and Opera (38.0.2220.41) so far.

@Jhernandez: Can you reproduce this? See also T139928#2474670.

Change 300012 had a related patch set uploaded (by Phuedx):
Reset distance between search icon and placeholder

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

Change 300013 had a related patch set uploaded (by Phuedx):
Use named constants to clarify CSS values

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

Change 300014 had a related patch set uploaded (by Phuedx):
Vertically center the search icon

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

Change 300022 had a related patch set uploaded (by Phuedx):
Reset distance between search icon and placeholder

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

I could reproduce, locally and in mobile:

Though less prominent.

I think locally it is more visible because my base font size on the browser is 20px.

I'll review the patches soon.

Jdlrobson added a subscriber: Jdlrobson.

I added lots of comments on the patchsets for your consideration. Note this is going to clash with T140490 so the sooner we can wrap up these tasks the better.

All patches are on the way to Mergeville. I'll move to sign off when that's all done.

Change 300012 merged by jenkins-bot:
Reset distance between search icon and placeholder

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

Change 300014 merged by jenkins-bot:
Vertically center the search icon

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

Change 300022 merged by jenkins-bot:
Reset distance between search icon and placeholder

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

Change 300013 merged by jenkins-bot:
Use named constants to clarify CSS values

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

phuedx reassigned this task from phuedx to dr0ptp4kt.Jul 22 2016, 9:04 AM
phuedx added a subscriber: phuedx.
Jhernandez closed this task as Resolved.Jul 29 2016, 10:30 AM

Verified in beta cluster.