Fix double-scroll issue on iOS devices #2728
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
🧱 stack: documentation
openverse-bot
added
🟥 priority: critical
dhruvkb
requested review from
fcoveram and
zackkrida
and removed request for
sarayourfriend
|
Reviewers changed to folks who own iPhones or MacBooks. |
|
Size Change: +1.27 kB (0%) Total Size: 839 kB
ℹ️ View Unchanged
|
|
Full-stack documentation: https://docs.openverse.org/_preview/2728 Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again. You can check the GitHub pages deployment action list to see the current status of the deployments. |
obulat
approved these changes
Jul 27, 2023
There was a problem hiding this comment.
I tested using an iPhone emulator, and the bug when you couldn't see the top of the header when you navigate from the homepage to the search page is fixed - so approving to unblock this.
I think we also need to add dyn-screen to the default layout. Also, in the emulator, I can see a white space in the bottom of the homepage. Can you see it on an iphone, @dhruvkb ?
|
@obulat that white space is likely because of the absence of the soft keyboard. It's not present on the actual phone. |
Nice! So happy that it's not a real problem :) |
|
I've updated the PR to include the changes to the |
|
I tested it on my iPhone and also Chrome in a Google Pixel phone, and noticed an issue that does not block this work in any way. Here is the homepage
The footer is behind the browser's bottom part. I personally don't think is a problem. And saw that other similar sites have the same issue in both browsers in both OS. But I do see a white space when scrolling after tapping the search input. safari.screen.recording.mp4 |
dhruvkb
changed the title
|
Update regarding the white space that appears below the page on input focus: That seems to be a Safari thing that cannot be disabled or worked around. Confirmed this to also affect Wikipedia and DuckDuckGo. Other iOS browsers like Arc or Quiche do not suffer from this bug. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes
Fixes #2683 by @fcoveram
Description
This PR fixes the janky scrolling behaviour on iOS by fixing the order in which the
100vhand100dvhheights are applied. On iOS they were being applied in the opposite order of what's desired, leading to the problem.Fixing the order as
100vh,100dvhensures thatdvhwins, if supported, fixing the issue.Testing Instructions
Checklist
Update index.md).main) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin