How to get smooth scrolling functionality on Safari - javascript

Just as the title states. Initially I tried to use polyfill smoothscroll by just adding this to the bottom of my body tag:
<script src="https://unpkg.com/smoothscroll-polyfill#0.4.4/dist/smoothscroll.min.js"></script>
But this didn't seem to really do anything. I'm clearly missing something here. Do I need to add something for the smoothscroll functionality to work? Are there any other vanilla js solutions to have smoothscroll work on Safari?

You can use Zenscroll, It is a JavaScript library that enables animated vertical scrolling to an element or position within your document or within a scrollable element
It works on
Android Browser 2.2+
Chrome for Android Chrome 14+ (probably earlier too)
Edge
Firefox 9+
Internet Explorer 9+
iOS Safari 4+
Opera 10.6+
etc..
https://zengabor.github.io/zenscroll/

Related

swiper not working on latest version of chrome (70)

I am trying to get swiper to work. I have tried it on edge and firefox and it seems to work. However it doesnt work on chrome.
To reproduce, visit http://idangero.us/swiper/demos/ using chrome and select the first demo, try swiping, it doesnt swipe. There is nothing n the console to suggest any scripting errors. This did used to work in chrome, so my guess is that an update in chrome has caused it to fail.
Does anyone have a fix or a workaround?
It seems to be fine in Edge and firefox....
Same here !
Chrome 70 supresses touch events on desktops :
"ontouch* members on window, document, and element are disabled by default on desktop devices"
https://www.chromestatus.com/feature/4764225348042752
Any workarounds ?
btw , "slick" swiper (http://kenwheeler.github.io/slick/) seems to be working well with touch

Jquery toggle/click not working in Safari versions older than 9

Currently having issues browser and device testing a website. The Jquery slide toggle navigation works on all devices and browsers apart from ones running versions of Safari below 9 (however Safari 9 works completely fine).
I have used the following code:
jQuery(document).ready(function($) {
function toggle() {
$("#nav").toggleClass("toggle")
$("#button_pannel1").toggleClass("toggle")
$("#button_pannel2").toggleClass("toggle")
$("#button_pannel3").toggleClass("toggle")
}
$("#toggle_button").on("click", toggle);
});
I built this using the following code on Codepen (which also doesn't work on old Safari versions either)
Any help would be much appreciated.
The issue is not with your jQuery code.
You are missing the necessary browser prefix in your CSS to make it work on Safari in versions below 9. Where you have "transform: translate3d(-300px,0,0);" you need to also add "-webkit-transform: translate3d(-300px,0,0);" to the CSS rules.
Here you can see which browsers require prefixes in order for 3d transforms to work in CSS:
http://caniuse.com/#feat=transforms3d

Detect iOS smartbanner feature availability

I'm using jQuery Smartbanner (https://github.com/jasny/jquery.smartbanner) for cross mobile OS smart banner support. But I've run on to an issue, that ONLY iOS safari natively supports smartbanner feature, and other iOS browsers - don't. So when i'm just activating this plugin, safari shows me tow smart banners (native and custom), and other browsers - as supposed - one. I've added next check, to make sure user is on iphone/ipad/ipod and safari.
if ( !(/(iPad|iPhone|iPod).*OS [6-7].*AppleWebKit.*Mobile.*Safari/.test(navigator.userAgent)) )
$.smartbanner()
But this conditional check restricts all iOS mobile browsers, not only Safari. So I've figured out, that i can't simply detect mobile safari in order to not apply smartbanner() plugin specifically on it.
Any tips on detecting iOS Safari specifically?
P.s.: all safari browsers have "Safari" word inside navigator.userAgent
Currently fixed that issue, by adding "Version" word into condition. I found that only safari has this word inside userAgent on iOS (Chrome, for ex. doesn't).
So final condition looks like this:
if ( !(/(iPad|iPhone|iPod).*OS [6-7].*AppleWebKit.*Version.*Mobile.*Safari/.test(navigator.userAgent)) )
$.smartbanner()
For those looking for alternative solutions, you can also check smartbanner.js that works out of the box across iOS and Android.
You can also do targeting based on a meta tag, e.g. for Android-only:
<meta name="smartbanner:enabled-platforms" content="android">
or in a more complex fashion:
<meta name="smartbanner:exclude-user-agent-regex" content="^.*My Example Webapp$">

Avoid auto scrolling to the top after aligning with an anchor properly

I have one of those issues that I have been staring at and researching, but can't figure out.
I am loading a listing page with a hash: (example URL)
service_page1.php?u=XX01-TR000016#000016
I have my anchors set: (Example Code)
<div class="b_list_normal_row_ws">
<a name="000013"></a>
<div class="b_list_row_item_But"><img example />
</div>
</div>
Currently I am testing within Safari (latest version) on a Mac. When I load the page, it scrolls to the proper spot for the anchor and then scrolls to the top. I have read other threads about stopping the auto-scroll to the top, but not found one (as of yet) that solves my problem.
Update: I have been working to figure out what could be causing this issue. I have since discovered that if I remove ALL included js files, then the anchors work just fine. However, if I include even the jquery file, then they stop working. The search continues...
Upon serious amounts of testing, it turns out that Safari (6.0.4) is the cause of the problem.
Tested with different browsers, Safari is the only one that is having the problem with the anchors.
With Safari, there is some form of conflict between javascript and the anchors, though it is out of my control. I have updated all my scripts to the latest versions also.
Browsers tested, all the latest possible versions:
Safari (Windows)
Firefox (Windows)
Chrome (Windows)
IE 9
Firefox (OS X Latest)
Chrome (OS X Latest)
Safari (iOS)
Chrome (iOS)
Safari (OS X Latest)* The problem child
UPDATE (June 11):
I have just tested the same site with the new version of OS X and Safari in the public preview and it seems that they fix this issue with the next release. Hopefully, they don't break it again before then.

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