Windows Phone 7 Issue about jquery.scrollto

[flesler]

Hi, sorry I took so long to reply. I don't have a IE mobile either, if you can help me reproduce the issue I might be able to fix it.

[tmorehouse]

@jcwebhole, I know of a bug/"feature" related to IE Mobile. It is mentioned on the getbootstrap.com site. Here is their recomended "fix" for handing IE Mobile (something to do with how IE mobile mangles the view port size)

Add this to your HEAD:

<style type="text/css">
    @-webkit-viewport   { width: device-width; }
    @-moz-viewport      { width: device-width; }
    @-ms-viewport       { width: device-width; }
    @-o-viewport        { width: device-width; }
    @viewport           { width: device-width; }
</style>
<script type="text/javascript">
    // handle IE Mobile 10 not setting device width properly
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
      var msViewportStyle = document.createElement("style");
      msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
      document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }
</script>

Not sure if this will help, but it might.

[Colir]

I've a windows phone under 8.1, and i've the same problem.
IE on windows phone need to animate the 'html'

like this $('html').animate({ scrollTop: desti }, 250);

How to solve this with your plugin ?

actually i use it like this
$.scrollTo( desti, scrollDuration, { easing:'easeOutSine'});

and this doesn't work under my windows phone

[flesler]

Hi @Colir

There're so many things that could happening.

• Have you tried @tmorehouse solution?
• Are you using that same page on other platforms and it works in them?
• Do you get any errors?

[Colir]

Hello.
Yes i've tried @tmorehouse solution. This doesnt solve the problem
Yes, scrollto work on all device and all browser (except Windows phone) without having any error

[flesler]

I see, as I said, I don't have a WPhone myself so can't quite test solutions. If someone decyphers what is that browser expecting I'll try to handle the case specially.

[Colir]

Hi. i can just tell you that to have a working scroll on my windows phone, i'm doing this

if(!isIEMobile){
    $.scrollTo( desti, scrollDuration, { easing:'easeOutSine'});
}else{
    $('html').animate({scrollTop:desti},scrollDuration,'easeOutSine'})
}

++

[flesler]

Great, how are detecting IE mobile?

[Colir]

like this

var isIEMobile = isIEMobile()
function isIEMobile() {
    var regExp = new RegExp("IEMobile", "i");
    return navigator.userAgent.match(regExp);
}

don't know his bulletproof...

[flesler]

Can you try the tests I setup at http://flesler.github.io/jquery.scrollTo/tests ?

Let me know which ones work and which don't and also include the useragent that the tests show.

[Colir]

yop.
The user agent show in all your test are
Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 735) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) MobileSafari/537

Max window scrolling (quirks mode) => DONT WORKS

Max window scrolling (compat mode) => WORKS

Max element scrolling (compat mode) => WORKS

Max element scrolling (quirks mode) => WORKS

Max window scrolling, within an iframe (compat mode) => DONT WORKS

Max window scrolling, within an iframe (quirks mode) => WORKS

Max iframe scrolling from outside (compat mode) => PARTIAL (no animation)

Max iframe scrolling from outside (quirks mode) => PARTIAL (no animation)

hope this help

[markvantilburg]

If you changed the 'website preference' (in the ie options) to Desktop would that help? Or do you have the same issues then. The user agent might differ in that case.

[flesler]

I just commited a change to the window-scroll branch, which contained a beta version to fix Chrome 40, it now also (hopefully) fixes Windows Phone.
Can you retry the tests? they contain the new beta version.

Even if this works, I'm reluctant to simply merge it to master, it'd be great to have more people test these to see there's no regression.

[Colir]

hi,
i try with this minified version
https://github.com/flesler/jquery.scrollTo/blob/window-scroll/jquery.scrollTo.min.js

...but it doesn't works...

[flesler]

Hi,

Do the tests work for you now? or still the same.

[Colir]

The test case suit have still the same results.

[flesler]

That is very strange, could it be that your browser is caching the JS? try clearing the cache.
It should be always using the which is what you said that works.

[markvantilburg]

On my windows phone 8.1 emulator these do not work in 1.5.2beta:

Max window scrolling (compat mode)
Error message: "FAIL: scrollable must always return exactly 1 element."
Max window scrolling (quirks mode)
Error message: "FAIL: scrollable must always return exactly 1 element."
Max element scrolling (compat mode)
Error message: "FAIL: scrollable must always return exactly 1 element."
Max element scrolling (quirks mode)
Error message: "FAIL: scrollable must always return exactly 1 element."
Max iframe scrolling from outside (compat mode) => PARTIAL (no animation)
Error message: "FAIL: scrollable must always return exactly 1 element."
Max iframe scrolling from outside (quirks mode) => PARTIAL (no animation)
Error message: "FAIL: scrollable must always return exactly 1 element."

[flesler]

Oh man, that's even worse. I don't see how the current code on _scrollable() could return more than one element, unless the original jQuery object had more than one element to start.

Could you get some more insights into that? I'm a bit lost.

[markvantilburg]

I'll check what happens on a real device tomorrow.

By the way the windows phone sdk is available for free and contains a working emulator (it's also a fast one compared to the android emulators available ;-) )

[markvantilburg]

real phone, as you can set 2 modes on the mobile phone, i tried these both: (same results as the emulator so that matches a real phone)

"mobile phone mode"
All except iframe fail

Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 630) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
document.compatMode is "CSS1Compat"
scrolling the HTML

"desktop mode"
All work fine

Mozilla/5.0 (Windows NT 6.2; ARM; Trident/7.0; Touch; rv:11.0; WPDesktop; Lumia 630) like Gecko
document.compatMode is "CSS1Compat"

[flesler]

I just realized the useragent for Windows Phone has "AppleWebKit" so the first if was the one being used. I just reversed the order so that IEMobile is first.

Still, maybe that was the problem in the first place. Maybe the standard solution (meaning not Chrome) was ok and the problem was Windows Phone was being affected by Chrome special case.

Can you retest with the current one? if it fails we can try using the standard solution for IE mobile.
Can you write down in each mode (compat, quirks) which element should be used?

Thanks

[markvantilburg]

On mobile with this user agent all work now

[flesler]

Great! still this shows the branch needs a lot of testing before releasing. A lot of browsers, other than Safar itself, include AppleWebKit in the userAgent.

[flesler]

Should I close this one?

[markvantilburg]

Well someone needs to check an actual 7.8 device, as i only checked 8.1 devices and emulators

[Colir]

hi,
Sorry i was missing this day.
Where are you in the test ? how i can continue to help you ?

[markvantilburg]

If you could check if the issue is solved on WP7.8 on this url:
http://flesler.github.io/jquery.scrollTo/tests

Then the windows phone issues are solved. They are for windows phone 8 (both phone and desktop mode)

But i think you have tested the 735 which also is a phone 8 device...

[flesler]

Hi guys,

I'd like to unify the effort of fixing Chrome 40, WP and Safari 6 into one issue so all users can test the beta version on their available browsers.
Can you please visit the issue #101, run the tests on your available browsers (desktop and mobile) and post your findings?

Thank you!

[flesler]

Hi all,
I found an interesting alternative approach mentioned on StackOverflow and decided to try it as well. It delegates much of the getting and setting scroll positions logic to jQuery's core.

It is already implemented on the window-scroll-alt branch. I replicated the tests using this new version so people can test it too. If you comment with results, please do that on #107.

[flesler]

I merged 2.0.0 to master via #109 and this issue should be fixed.
If the problem persists please reopen the issue with details on the situation.
If you have any issue after the update, first check this link, If your problem is not solved then go ahead and report the issue.