Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use of vh units in .pf-c-page height causes wonky scrolling issues in iOS #1174

Closed
rhamilto opened this issue Jan 3, 2019 · 5 comments
Closed

Use of vh units in .pf-c-page height causes wonky scrolling issues in iOS #1174

rhamilto opened this issue Jan 3, 2019 · 5 comments
Assignees
@andybraren @christiemolloy
Milestone
1.0.0-beta.1

Comments

@rhamilto
Copy link
Member

rhamilto commented Jan 3, 2019 •
edited

Note the weird rubber-banding effects causing the inability to get to the bottom of the content or to get the masthead to reappear at the top. Fast scrolling causes the bug. Stopping, allowing the browser to settle, and re-scrolling works around the bug. http://recordit.co/luzQgzPjXq

Changing 100vh to 100% appears to resolve the issue. http://recordit.co/UdyVl6Mks7

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#article-header-id-0 outlines the issue in detail.

cc: @spadgett, @janwright73
This was referenced Jan 3, 2019
Closed
Closed
@mcoker mcoker added the css label Jan 3, 2019
@rhamilto rhamilto mentioned this issue Jan 3, 2019
Merged
@rachael-phillips rachael-phillips added this to the 1.0.0-beta.1 milestone Jan 10, 2019
@mcoker
Copy link
Contributor

mcoker commented Jan 14, 2019

Thanks @rhamilto. We should also look through the other components and layouts and see if we're using height: 100vh and address those.

@christiemolloy christiemolloy self-assigned this Jan 18, 2019
@mcoker
Copy link
Contributor

mcoker commented Jan 18, 2019

FYI, this will likely require the ancestors of anything with height: 100% to also be height: 100%.

For example, if we have

<html>
  <body>
    <div class="pf-c-page">

Then both html and body will need height: 100% as well. This is the case for any component we want to be height: 100%.

Note that this will require some work in the workspace to get the page demos to work since gatsby helmet creates a bunch of divs between <body> and .pf-c-page in our workspace. @dgutride can likely help out with that.

@christiemolloy
Copy link
Member

christiemolloy commented Jan 23, 2019 •
edited

What I've seen with this issue so far:

  1. Changing pf-c-page--Height - from 100vh to 100% changes the page component to look like this:

screen shot 2019-01-22 at 12 13 56 pm

  1. With the page demo I'm having trouble applying height: 100% to every div from <html> to .pf-c-page. I can't target the divs with no id or class.

  2. The issue only occurs using safari on iOS, it seems to be fine with chrome on iOS

@mcoker
Copy link
Contributor

mcoker commented Jan 23, 2019

I chatted with @dgutride about this and we agree it's OK if the workspace breaks but we fix the issue in core. He also agreed that we could address the workspace by hacking something into workspace.scss like html body > div { height: 100%; > div { height: 100%; > div { height: 100%.... to target all of the elements that come before .pf-c-page in the page examples. We should try and get this fix into core by beta though.

@christiemolloy
Copy link
Member

@mcoker ok sounds good will put a PR up for what I have been doing, shortly.

@christiemolloy christiemolloy mentioned this issue Jan 23, 2019
Merged
@mcoker mcoker mentioned this issue Feb 7, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andybraren andybraren

@christiemolloy christiemolloy

Labels
None yet
Projects
None yet
Milestone
1.0.0-beta.1
Development

No branches or pull requests
5 participants
@rhamilto @andybraren @christiemolloy @mcoker @rachael-phillips