scrolling on iphone 4s looks to target slideout menu

[mikaelkaron]

For some reason the initial scrolling of a page looks like it's targeting the slideout menu when using an iphone 4s (latest os). Basically you see you are scrolling an invisible area (the scrollbars can be seen on the side).

A demonstration is available at http://open-learning.org when visiting using a 4s. Not sure if it only targets 4s or just the same screen size.

Unable to reproduce on an iphone 6.

[mmistakes]

It's probably the #page-wrapper element that's causing the problems. I originally had the entire page push to the left when the off canvas menu slide it, so there's some old code still floating around that I never cleaned up.

Basically a few of those elements have overflow properties set on them and I'm guessing depending on the screen size and amount of content in there the scrollbars may or may not show.

If I ever get the free time I was going to go back and do a serious overhaul of the starter to bring it more in line with what I've done on my personal site (mademistakes.com, which is what Skinny Bones was originally based off of). At this point that's a big if...

[mikaelkaron]

Seeing as I'm intending to us this in the long run, is there anything I can do to help out?

[mmistakes]

Do you have screenshots to show were you're seeing the scrollbars? They're not showing on my iPhone 5s. I also tried the iPhone 4's screen size in Chrome dev tools and didn't see them either, so it's hard to troubleshoot.

Does the Skinny Bones demo site produce the same behavior or is it just on your site?

[mikaelkaron]

Just confirmed:

• it happens on the demo site to
• the scrollbars are only active when you try to scroll, attached screenshot when i try to scroll but the body stays static.
  -the experience is exactly as if there was an additional transparent layer on top of the site that 'captures' the scroll attempt.

Could it be that you have to resize and touch-scroll to see the bug?

[mmistakes]

Strange that I can't reproduce it, I even tried in an iPhone simulator and it works just fine.

You could try removing <div class="menu-screen"></div> and see if that's the problem. Originally I used that to dim the main content when the menu slid in. Now it's used to toggle the menu when you touch or click anywhere except on the menu pane.

It's possible it's displaying on top of the menu for some strange reason on an iPhone 4s which screws with the scroll.

You could also try removing all of the styles on #page-wrapper and see if that makes a difference (there's an -webkit-overflow-scrolling attribute in there that might be worth investigating). It's hard for me to troubleshoot because I can't reproduce it to inspect which element is causing the problem.

That or maybe the z-index order of the elements needs to be shuffled around. Still strange that it would do it only for you on an iPhone 4s. What iOS version do you have 7 or 8? Maybe there's a bug related to that.

[mikaelkaron]

Screw this. I'll get some time and debug this in the morning.

I'll try removing the div, but I'm not sure it will help. I can confirm it's the menu I'm scrolling by forcing scroll of the "wrong" layer and taping the menu button. When the menu opens I can confirm the scroll position of the menu is consistent with the scrollbars of the mystery layer.

Mystery scroll captured!

Open the menu while still scrolling. Also confirm that if I keep scrolling the menu updates accordingly.

Where the menu "should" have been

iOS 8.3 iPhone 4s btw.

[mmistakes]

Maybe it's Javascript that toggles the menu visibility class off and on or
z-index order of the menu. Still doesn't explain why it works perfectly
fine on an iPhone 5s with iOS 8.3. The screen width is the same so it's not
like something is getting screwed up with the media queries.

I'm at a loss for what to fix. If it's that problematic for you maybe ditch
the off canvas menu all together. The way I did it wasn't the greatest
since I'm essentially inserting the same nav elements twice on the page.
Once for the row of links that shows on larger screens, and then a more
exhausted version with teaser text and images for the off canvas.

On my personal site I removed the extra markup and just went with one nav.
Maybe see if that has a scroll issue for you and if it doesn't port it
over. I doubt I'll have time to do anytime soon.

On Tue, May 26, 2015 at 12:58 PM, Mikael Karon [email protected]
wrote:

Screw this. I'll get some time and debug this in the morning.

I'll try removing the div, but I'm not sure it will help. I can confirm
it's the menu I'm scrolling by forcing scroll of the "wrong" layer and
taping the menu button. When the menu opens I can confirm the scroll
position of the menu is consistent with the scrollbars of the mystery layer.

Mystery scroll captured!

[image: image1]
https://cloud.githubusercontent.com/assets/478468/7817955/243eb38a-040b-11e5-91c0-6b0dfe93a77f.png

Open the menu while still scrolling. Also confirm that if I keep scrolling
the menu updates accordingly.

[image: image2]
https://cloud.githubusercontent.com/assets/478468/7817956/24435b1a-040b-11e5-883c-ae65e8e43221.png

Where the menu "should" have been

[image: image3]
https://cloud.githubusercontent.com/assets/478468/7817957/24524d28-040b-11e5-9b8d-5c1b878b2650.png

iOS 8.3 iPhone 4s btw.

—
Reply to this email directly or view it on GitHub
#38 (comment)
.

[mikaelkaron]

Well, maybe we can work together to replace it?

And regarding that. You mentioned earlier that you'd maybe want to merge some of the changes you've done to your personal site. Maybe we can break it out in tickets and I can try to pitch in.

[mmistakes]

If you want to take a stab at it I'm open to looking at PR's. Other than
that I don't really have the time to devote to the project right now.

I haven't completely decided on what it should be either. I'm partially
waiting to see how themes in general with Jekyll shake out in the next
couple of releases. Octopress is doing some smart things with it's CLI and
related gems, and if that gets some traction I'd much rather port my themes
into Ruby gems.

Maintaining Jekyll "themes" right now is a nightmare and horrible
experience for the user and developer. Forking some random dudes Jekyll
site repo was never the right way to do any of this.

On Tue, May 26, 2015 at 1:24 PM, Mikael Karon [email protected]
wrote:

Well, maybe we can work together to replace it?

And regarding that. You mentioned earlier that you'd maybe want to merge
some of the changes you've done to your personal site. Maybe we can break
it out in tickets and I can try to pitch in.

—
Reply to this email directly or view it on GitHub
#38 (comment)
.