Mobile device - problem with scrolling

[mickeyhoh]

I am not sure if this relates to the viewport.

If I view my blog page via the mobile device, I will see the homepage, with the Menu of the left and the list of Posts on the right.
I am unable to scroll down the list of posts on the right.
(this problem is only resolved i.e able to scroll down the list of posts, if I hide the left Menu by clicking on the Menu button)

In addition, if I have additional links (using Navigation), I am unable to scroll down view the bottom part of my links and the social links. I am only able to see my photo and the first few links.

It seems like the whole page of the homepage with the Menu, is truncated if viewed via a mobile device.
My mobile device is Android with 5 inch screen, using Chrome version 45.

[mickeyhoh]

I have a feeling that the 'issue' I encountered above is related to a comment posted on one of your post:
http://kikobeats.com/styleguide/
which commented :
"The landing page, or div layer sitting on the blog posts could make a lot of people confused and close the page. Because people will try to scroll and it won't scroll. So you could add an on scroll trigger to retract the layer to the right instead of expecting them to click the tiny "blog" link."

[Kikobeats]

Can you provide a gif of this, using recordit or something like that? I don't understand clear the issue :-(

[mickeyhoh]

To better illustrate the issue, I am using a mobile phone emulator:
http://mobiletest.me

When the sidebar is closed:
I used a small Samsung phone to view your landing page:
http://mobiletest.me/samsung_galaxy_y_emulator/?u=http://kikobeats.com
I could scroll down the list of posts when sidebar is closed because there is a scrollbar.

When the sidebar is opened:
http://mobiletest.me/samsung_galaxy_y_emulator/?u=http://kikobeats.com
I could not scroll the navigation links when sidebar is opened (there is no scrollbar available).
I also tested on another phone with a bigger screen:
http://mobiletest.me/google_nexus_7_emulator/?u=http://kikobeats.com
The list of posts is shown together with the sidebar although the sidebar is opened.
However, I couldn't scroll down the list of pages when the sidebar is opened. This gives an impression there is a problem with scrolling.

I believe we have 2 issues here:
a) When the sidebar is opened, there issue is that, I couldn't scroll down.
b) When the sidebar is opened, the enhancement is, the sidebar should fill up the whole view so that the list of posts will not appear (I think this maybe related to issue #29 for a clean landing page similar to Casper)

[Kikobeats]

Oh, now I understand you.

The problem is device with little screen. The CSS property to control the scroll is overflow. At this moment, when you open a the aside in mobile/tablet the overflow value is hidden because:

1. I supposed all the time that your device is big enough.
2. When the device is big enough and you open the aside, you don't want experimented a bad interaction with the aside if you by mistake, like:

The point is, if I avoid to use overflow:hidden screen with big enough is bad and I use overflow:hidden experience with devices with small screens is bad 😅.

The solution would be detect the vertical screen size and apply or not the CSS property dynamically. For example:

var h = window.innerHeight; // device screen
var lastElement = $('.social.item.hvr-grow-rotate').last().offset().top; // visible part of the web in the screen.
if (h > lastElement) $('.profile').attr('overflow-y', 'hidden'); // block scroll in big screens.

Actually I prefer a more static solution... any idea?

[mickeyhoh]

Good feedback @Kikobeats.

My comments:
I understand you intention to hide the scroll bar for big screens.
The problem is that, if the scroll bar is hidden for big screens, the list of posts appear on the right but I will not be able to scroll it down. it is the problem I mentioned above. So the list of posts become stuck giving the impression that the content is truncated.
Similarly, if my aside is open and if my aside has a reasonable long list of navigation links (for example, maybe 5 navigation links and 6 social icons), the aside is truncated. You will see the grey section, like your screenshot/capture above, hiding the twitter, linkedin icons etc.
If you limit the number of navigation links or social icons, then such a solution is not good.

An ideal solution is to have the cover takes up the whole page, just like the enhancement mentioned in #29 and #71. With this solution, you will have a scrollbar visible so that you could scroll the aside. Also, this means that the list of posts will not appear on the right by mistake, and the scrollbar will not affect it in any way.

I don't expect you to cater to all and every kind of devices (including mobile or notebook), but if you could cater to most sizes including big and small devices for mobile, then you have an elegant theme.

Your theme is very nice and it would be nicer to solve this issue.

[Kikobeats]

@mickeyhoh can you write a solution as PR? I understood your point but definetly is more easy to implement if you have to resolve the real problem that an simulation.

[mickeyhoh]

@Kikobeats, I am sorry but I don't really write codes. Do you mean to say that you need me to write some codes and activate the PR?

[alexanderbez]

@Kikobeats, love the theme! Not sure on what the progress/update is on this issue, but there are a few blogs in the Showcase that are modified in such a way to "fix" this issue. Not sure if that would be of any help.

[Kikobeats]

@alexanderbez

I want to fix it and I know it will be easy, but I want to be sure to not create a lateral effect for other devices as well.

Now I think that the best solution is using viewport units in this part of the web. Ideally if somebody affected with this bug could be make a PR, I would appreciate, in other case, yes, I want to fix, but if another priority bug appear I move this on the end of my bugfix list.

btw I think that is not too much critical, the trend is screens getting bigger :P

[mickeyhoh]

I am not sure if I could help in any way?

[alexanderbez]

@Kikobeats, I was viewing the site on a Oneplus one witch has a 5.5" screen. I'd say that's a pretty big mobile screen size.

[Kikobeats]

Can you try to resolve the bug in a PR? Definitely I need more devices for
testing this :-(

On Tuesday, September 29, 2015, Alexander Bezobchuk <
[email protected]> wrote:

@Kikobeats https://github.com/Kikobeats, I was viewing the site on a
Oneplus one witch has a 5.5" screen. I'd say that's a pretty big mobile
screen size.

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

[alexanderbez]

@Kikobeats, sure I can poke around and see if I can help. Also, for debugging you can use Chrome's device emulator that's built in (Device mode).

See your example blog: http://cl.ly/image/30130z0W0R2J
See another that seems to have a patch: http://cl.ly/image/270b0t1q2v1c

[mickeyhoh]

@alexanderbez
Wow! Good stuff Alex.
Previously there was missing background/cover for the aside, which happened in @Kikobeats's release but not in Adrian's. Eventually @Kikobeats eventually resolved the bug (thanks Kikobeats!)
It seems that Adrian's release do not have this viewport issue. I am wondering if Adrian's could help us out?

[Kikobeats]

@alexanderbez thanks for the feedback! I want to resolve for this week :-)

[mickeyhoh]

I guess this bug is still being fixed?

[Kikobeats]

@mickeyhoh @alexanderbez

Can you confirm me that aside under mobile/tablet is working well now? check in my website http://kikobeats.com/, I have the pre-release version 😊

[mickeyhoh]

@Kikobeats. I tried it on the same mobile phone I used earlier. Looks good. I think it is fixed and it has similar results as Adrian Perez's theme that was based on your there. Well done!

@alexanderbez, can you confirm at your end please? Do you have any smartphone or tablet or emulator to confirm the fix?

[alexanderbez]

@mickeyhoh @Kikobeats, tested on my personal mobile device and via the Chrome emulator. Looks pretty good!

[mickeyhoh]

Thanks again @Kikobeats and @alexanderbez !