A pair of problems with skrollr in ipad

[FranciscoVillen]

Hello. Thanks for this amazing parallax plugin, it is great!.

I'm developing a website using skrollr and it have a pair of problems when I see my website in ipad.

1. At first, the web is seen right, but when I turn the ipad to vertical position, and I turn again to horizontal position. The skrollr adaptation to tablets stop working and the website isn't seen correctly. The problem seems to be only in horizontal position, in vertical, the website is correctly seen.
2. I have a form at the end of the page. When I fill de form, the virtual keyboard is displayed, when I leave the form, an extra space appears at the end of the web.

Your help is welcome. Thanks!

[Prinzhorn]

First of all: I don't have an iPad, so I can't help you as much as I would like to.

The skrollr adaptation to tablets stop working and the website isn't seen correctly.

That's very vague.

1. I'm not sure why that would happen. Maybe Safari doesn't fire the resize event correctly when closing the keyboard. Try executing the refresh method shortly after the input gets blured.

[FranciscoVillen]

Thanks for answering Prinzhorn.

I will try with the method refresh to the second problem.

About the first issue, I have done some screenshots when skrollr works well adapting and some images when skrollr doesn't adapt the web in ipad.

http://multiplicaliatest.com.s70-169.furanet.com/img/web1.PNG [2]

http://multiplicaliatest.com.s70-169.furanet.com/img/web2.PNG [3]

http://multiplicaliatest.com.s70-169.furanet.com/img/web3.PNG [4]

http://multiplicaliatest.com.s70-169.furanet.com/img/web4.PNG [5]

The images web1.png and web3.png is when the website is adapted with the ipad in horizontal position. And the images web2.png and web4.png is when the website isn't seen correctly after turning the ipad to vertical position and again to horizontal position.

Thanks.

[Prinzhorn]

I don't know how your HTML and CSS are structured, but don't you defined the width of these elements? Or are they animated? It looks like the width of the whole body is wrong. Do you dynamically update the CSS for different viewport sizes?

[FranciscoVillen]

I use media queries to apply different styles to different screen sizes, but the styles I have defined for different sizes aren't any special still now.

Do Skrollr change the size of the images and texts depending on the size of the viewport size? It seems to be something wrong with skrollr when you turn the tablet from horizontal position to vertical.

I'm working in this. I will tell you if I can solve it.

By the way, it is the website:

http://multiplicaliatest.com.s70-169.furanet.com/

It is still in development.

[Prinzhorn]

Do Skrollr change the size of the images and texts depending on the size of the viewport size?

It does only change styles when there are keyframes. And it changes the styles of body (overflow and height) and skrollr-body

I'm working in this. I will tell you if I can solve it.

Great. I can't help you much, sorry

[FranciscoVillen]

I have solved the problem when I turn the ipad. As you said, it was a problem of the width of the body, this width was increasing dinamically because of an animated div element which moves to the right disappearing from the screen. I solved this adding the property position:relative to the container of this animated element.

I haven't still solved the second problem. When I fill the form, the virtual keyboard is displayed, when I leave the form, an extra space appears at the end of the web.

Before body close tag I have the next script calling the refresh method when someone leave the input of the form:

skrollr.init({ forceHeight: false, mobileDeceleration: 2 });

jQuery("#luna form input").blur(function(){ skrollr.refresh(); });

The blur event is working but the refresh method does not.

Is refresh method correctly used? Thanks.

[Prinzhorn]

Is refresh method correctly used?

no. Look at your console, there should be an error because it does not exist on skrollr

var skrollrInstance = skrollr.init({
    forceHeight: false,
    mobileDeceleration: 2
});

jQuery("#luna form input").blur(function(){
    skrollrInstance.refresh();
    //or
    skrollr.get().refresh();
});

[FranciscoVillen]

I have called to refresh like you say, but it doesn't solve the problem.

The virtual keyboard of ipad push up all the web but the size of the body is the same. At the top of the web the first 200 pixeles of height are not seen, and at the bottom there are 200 pixels of height extra which are empty.

I have tried to solve it in a lot of possible ways.

I will follow searching.

Thanks.

[Prinzhorn]

Please check if the resize event is firing while the keyboard is disappearing.

Maybe create a blank page with only an input element and log every resize event on the page to see when it's happening. If there is a resize event after the keyboard has been completely removed, then skrollr should recalculate all the things correctly. Or there may be other issues.

[F0xtr0t]

I have the same issue with skrollr and form on iPad.

There are no event triggered when iPad virtual keyboard is add or removed. But when he is removed, the page stay crop at the top and there are X pixels added at the bottom.

[Prinzhorn]

Unfortunately I don't have access to an iPad. Maybe someone finds an article about it and possible workaround. We can't be the only ones with this issue.

[realyze]

+1

This seems to be broken on Androids and iPhones too (also it's reproducible on xcode iOS simulator).

[Prinzhorn]

This seems to be broken on Androids and iPhones too

thanks for the info. That would be great if the keyboard issue is not just an iPad issue. Have to check.

[realyze]

Fastest response ever. :-) Thanks for the reply.

The main issue seems to be that refresh doesn't do anything in this case. destroy() and init() combo does the trick but also scrolls the page back to top.

[realyze]

FWIW workaround that seems to work for me is calling $(window).scrollTo(0) on blur event.