Page MenuHomePhabricator

[bug] the header moves 1px up after focus on iOS
Closed, ResolvedPublic

Description

Steps to reproduce:

  1. go to reading web staging
  2. tap on magnifying glass to trigger search
  3. the header moves 1px up entirely.

screenshot side by side

GIF showing the jump

os: iOS
browser: safari/ chrome
Note: doesn't occur on desktop browsers Safari, Firefox or Chrome.

Event Timeline

Nirzar created this task.Jan 27 2017, 6:11 PM
Nirzar renamed this task from [bug] the header moved 1px up after focus to [bug] the header moves 1px up after focus.Jan 27 2017, 6:18 PM

Cannot replicate this. Have updated http://reading-web-staging.wmflabs.org/wiki/Main_Page to check we are looking at the same thing.

Nirzar updated the task description. (Show Details)EditedJan 27 2017, 7:43 PM

updated the description with example, taken at reading-web-staging right now

Jdlrobson renamed this task from [bug] the header moves 1px up after focus to [bug] the header moves 1px up after focus on iOS.Jan 27 2017, 7:45 PM
Jdlrobson updated the task description. (Show Details)
Nirzar renamed this task from [bug] the header moves 1px up after focus on iOS to [bug] the header moves 1px up after focus.Jan 27 2017, 7:45 PM
Nirzar updated the task description. (Show Details)
Jdlrobson renamed this task from [bug] the header moves 1px up after focus to [bug] the header moves 1px up after focus on iOS.Jan 27 2017, 7:47 PM
Jdlrobson updated the task description. (Show Details)
Qgil removed a subscriber: Qgil.Jan 27 2017, 9:36 PM
Nemo_bis removed a subscriber: Nemo_bis.Jan 28 2017, 9:30 AM

Cannot reproduce on iOS 9.0, iPhone 6S:

@bmansurov i can see it move! it's exactly 1px so difficult to catch but mostly because of some border bottom or border top

Inspected 10.2 iOS simulated version. #mw-mf-page-center .heading-container is 54.09px
.overlay .overlay-header-container is 53.09px ... so yes 1px difference.

.overlay .overlay-header and #mw-mf-page-center .header is 53.59px so I think given the children have more height then the parent container it's causing these issues. I tried removing .overlay-ios class but the issue still remains!

Adding the rule

.header-container {  min-height: 55px; }

seems to take away the problem... I think... but that seems hacky.
@Nirzar can you verify the problem is gone on reading-web-staging (just uploaded it there)?

Change 335176 had a related patch set uploaded (by Jdlrobson):
Define header height in pixels

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

Change 335181 had a related patch set uploaded (by Jdlrobson):
Avoid a 1px glitch in ios

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

Change 335176 abandoned by Jdlrobson:
Define height of header components in pixels

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

In order to get this right, JR had to remove fadein animations for iOS. this is iOS specific bug. the trade off is reasonable and the bug is resolved on reading-web-staging.

Thanks JR!

Change 335181 merged by jenkins-bot:
Avoid a 1px glitch in ios

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

phuedx added a subscriber: phuedx.Jan 31 2017, 10:57 AM

Id2b340e8: Avoid a 1px glitch in ios was checked out on the staging server by @Jdlrobson so that @Nirzar could sign it off โ€“ which he's already done! ๐Ÿ™ ๐Ÿ’ฅ

I visited the staging server using Safari for iOS 10 on an iPhone 6 and observed that there isn't a 1px jump when the search overlay appears and, unfortunately, it isn't faded in.

phuedx closed this task as Resolved.Jan 31 2017, 10:58 AM
phuedx claimed this task.