| • Nirzar | |
| Jan 27 2017, 6:11 PM |
| F5419045: header.gif | |
| Jan 30 2017, 3:14 PM |
| F5377955: bug_movesup.gif | |
| Jan 27 2017, 7:45 PM |
| F5377923: pasted_file | |
| Jan 27 2017, 7:43 PM |
Steps to reproduce:
screenshot side by side
GIF showing the jump
os: iOS
browser: safari/ chrome
Note: doesn't occur on desktop browsers Safari, Firefox or Chrome.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Jdlrobson | T148514 [EPIC] Improve site branding on Mobile website | |||
| Resolved | phuedx | T156509 [bug] the header moves 1px up after focus on iOS |
Cannot replicate this. Have updated http://reading-web-staging.wmflabs.org/wiki/Main_Page to check we are looking at the same thing.
@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
Change 335181 had a related patch set uploaded (by Jdlrobson):
Avoid a 1px glitch in ios
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!
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.