Mobile Chrome scrollTop/animate doesn't scroll - javascript

I have a problem with the mobile version of Chrome.
I want to scroll to a certain position in my html document after loading. I tried to simply use a anchor (#someId) at the end of the url which works fine in FF and desktop version of Chrome. But not on the mobile version.
To work around this I added a scrolTop with a little bit of delay like so:
var aTag = $("a[href='#someId']");
setTimeout(function() {
$('html,body').scrollTop( aTag.offset().top);
}, 250)
I'm using jQuery version 1.12.1
Again, it works everywhere except in the mobile version of Chrome - funny enough when I talk about the mobile version I just have to use the developer tools and tell them to display the page as it would be on the phone.
Any idea on how to fix this?

Related

JS doesn't work on Safari on mobile devices only, can't replicate in Safari Console

Looking for ideas on how to debug instances where JS doesn't work on Safari mobile, works fine on desktop, and then in desktop when I open the Safari console and run the page again using Safari-iOS 9.3-iPhone (which is the version people have had issues on) on a mobile screen it still is working fine.
Thanks!
use can use safari remote debug, you can find a detail steps online

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

Mouse click and mouse over effect for turn.js not working

I was working upon a website with a flipbook kind of jQuery effect provided by turn.js.
It was working very well on my development environment. Suddenly have found out that the mouseover effect and mouseclick has stopped working on browser Chrome V29.0.1547.66m.
It works perfectly with V26.0.1410.63 and on other browsers (Firefox).
Need to know the reason and some workaround solution for the same.
Here is the link to my webpage.
I had checked your link, I think there is some problem in turn.min.js script. Use turn.js script in place of turn.min.js it is working fine on your link.
As per issue no 399 posted on blasten/github https://github.com/blasten/turn.js/issues/399 change your turn.min.js to latest version of turn.js. This will surely solve your issue with chrome browsers' latest version on windows.
helloi was using the unminified version of turnjs and still had problems with some browsers, i read the code and discovered that mouse move events were not dispatched
i tested with 2 computers :
old Toshiba laptop with 1st-gen i7, Windows 7 Pro SP1, Opera 35.0.2066.68, Firefox 44.0.2 64Bits
brand new Intel NUC5i7RYH, Windows 8.1 Pro, same browser versions
mouse events
working properly on NUC + Firefox and Toshiba + Opera
NOT working on NUC + Opera and Toshiba + Firefox
uh ?
mouse || touch callbacks are set at line 28
touch capacity is detected at line 26
the isTouch test at line 26 returns true on some desktop browsers, which causes the mouse controls not to work
i noticed many tests provided on forum an blog posts didn't detect touch capacity properly, because they often check if touch APIs exist, which seems to be true in some Opera and Firefox browsers (i read some posts about people having the same problem with Chrome, mine works well)
i ended up using this test, which is far from perfect but does the job for now :
!(window.screenX != 0) && ('ontouchstart' in window || 'onmsgesturechange' in window);
i have no more problems, but this solution should be tested on many devices and the isTouch test must be improved
also, i got a bug in the zoom (line 90) while using latest version of jQuery, which i fixed by unchaining the two listeners as follows :
this.mousedown(zoomMethods._mousedown); // what ? chaining bug ?
this.click(zoomMethods._tap);

Ascensor.js IE8

I am working on a new site, currently hosted here. I am implementing a single page design using the Ascensor plugin, found here. It works fine in Chrome and Firefox, and IE10 and IE9. However, in IE8, the home page loads and then if I click on any of the navigation icons, the page starts shaking, literally shaking left and right very fast, and the browser crashes after a few seconds. I have used Ascensor in IE8 before, and it had worked. I can't even debug as it just crashes without any warning in IE8. I've been trying to figure out what's wrong for the past few hours, with no success.
I checked the behavior in IE8 by:
Changing the document mode to IE8 in IE10.
Using a Win7-IE8 VM
If it helps, I am also using the following jQuery plugins on the page.
CarouFredSel and FancyBox for the gallery.jQuery custom content scroller
Also, I am using jQuery 1.8.3 as Ascensor does not run correctly using later versions.
Someone please point me in the correct direction. Thanks.
The issue was related to the scrollbar (not sure why it was occurring though). Using the following CSS on the body fixed the issue.
body
{
overflow: hidden;
}

jQuery not working in Safari

I've got this jquery script, it seems to be working in other browser, but it doesnt work at all in Safari. Does anyone know why this might be happening? Its supposed to be accessed from an iphone.
url: http://connectsr.org.nz/calendar/
thanks
in safari 5 on windows 7 this works, but not with my iphone (iphone 4 with newest ios, not jailbreaked). i think this is because if you click and drag to scroll the colums, the safari on the iphone tries to scroll the site (which is what it normally does when you klick and drag on a website)
Jquery script is not working on the mobile perfectly. Instead of jquery, you can use jquery mobile (http://jquerymobile.com/)

Categories

Resources