Website doesn't scroll down/up on mobile

HTML & CSS
,
1

Hi everyone, my website http://www.associazioneoltreilmare.com/ doesn’t scroll down/up when opened with mobile (I could only test with my windows phone)

Is this a case of html5 incompatibility or something else? I think the cause is the slider/banner

2

Seems to be working in my iphone ok.

3

That’s good, I guess it’s a windows phone issue (no wonder).

Can someone try that with windows phone or maybe just look at what the code issue might be there?

5

Hi, does anyone have an idea on why it won’t scroll please?

6

You have overflow:hidden; on <body> . What happens if you remove that?

1 Like
7

If Ryans suggestion doesn’t help then its probably an issue with the nicescroll plugin you are using.

I would suggest you make a stripped down demo of the scroll effect just to check that it actually works in your phone. Or check out if the scrollbar is working on the author’s site in your phone.

1 Like
8

I disabled nicescroll and it does scroll down and up but unfortunately the sliders disappear by consequence

9

Does the authors site work on your phone?

I don’t see why the sliders would disappear when you disable nicescroll because they don’t share the same code. Did you remove the css for it also?

Perhaps try the reverse and disable the slider just to see if the scrolling then works. You need to find out whether the scroll actually works at all on your phone because it may be that your phone doesn’t support it.

10

body overflow hidden was the problem. Thanks

1 Like
11

Just another minor issue though.

I’m creating this homepage for my website using that template but I can’t seem to make the background image scroll smoothly as you can see. It involves bg-parallax and a javascript as well as css3 so I’m not sure where to put this post.

It somehow involves the LI and UL in the banner when it transitions. If I remove that the background is smooth on the Last minute offer.

12

Hi,

I didn’t really notice any issue with scrolling. There is a lot going on in that page and these parallax scrolls are always going to cause some detriment to performance.

Which background did you remove when you say it made it smoother?

I would be a little concerned about the 500k images in the slider and I would like to see them down to 150k or so.

13

Agree, these are just test images, so are not compressed as much as I’d like. I will take care of that later.

Anyway removing completely the

<div class="tagline visible-lg" id="tagline">

or setting transition to less than 0.5s makes it smoother

14

Hi,

I see you have the transition at .1s which is why I probably didn’t notice the scroll.

Try this:

#tagline,#tagline ul li {-webkit-transform: translateZ(0);}

Activating the 3d rendering can smooth out the performance.

15

Thanks I put it in the CSS, can you check if I input it correctly? It looks better on this screen but can’t try from home now

16

Yup it’s correct.

17

Thanks, another issue with scrolling on mobile (Why it won’t end…?) http://www.sntravel.co.uk/index-new1985.html

When I go down and the slider/banner changes page, the website goes up to top for some reason, unless I’m actively scrolling with touch

18

I’m not seeing that. Tried iPhone6+ on Browserstack. Also tried taking my desktop Chrome browser and resized until I got to mobile view, and still nothing there. No jumping.

19

That’s good! I guess it’s just my windows phone t.t

20

If you tell me exactly what windows phone (version/OS etc) I can see if browserstack has that phone and I can test whether the issue is there.

21

I have a Nokia Lumia 1020, OS is 8.10.12393.890 Windows Phone 8.1 last update.

I’m using the standard browser (IE)