We Keep Coding

Sticky menu jumps to fixed position too early on iOS Safari and Chrome

I am losing my mind with this seemingly simple code.
I have created a sticky menu for a few sites and they all share the same problem. On iOS devices, at least the iPhone 6 with up to date iOS, the menu jumps into its fixed position too early. It's as if iOS miscalculates the offset for the element and runs the function too early. Though for the life of me I can't figure out how or why. On desktop it works fine. On Android it works fine. Please help!! The site is [DreaD Illustrations][1]. I have tried everything I can think of and find on the internet. Also, I noticed, it calculates incorrectly on initial load, but when you scroll down and scroll back up it seems to work. Help! The code is below.
var navBar = jQuery("nav.site-navigation.main-navigation.primary.mobile-navigation");
var topofNav = navBar.offset().top;
stickyDiv = "being-sticky";
mahMain = jQuery('#main').outerWidth();
jQuery(window).load(function(){
jQuery(window).on('scroll', function() {
if (jQuery(document).scrollTop() > topofNav) {
navBar.addClass(stickyDiv);
navBar.outerWidth(mahMain);
} else {
navBar.removeClass(stickyDiv);
}
});
});
.being-sticky {
position:fixed;
top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Thanks everyone for your help!
So it was a simple fix for me for safari. I created a variable of whenToScroll and set it differently if it was safari or another browser! That seemed to fix it! Though I tried the safari setting for chrome and no go.
if (jQuery.browser.safari)
var whenToScroll = jQuery("div.hgroup.full-container").outerHeight();
else
var whenToScroll = navBar.offset().top;

Have you tried setting a timeout and seeing how that displays on IOS? If it's a timing thing that's being read differently, you can use navigator.userAgent to remove the class a bit later for IOS devices only.
if(/iPhone|iPad|iPod/.test(navigator.userAgent)) { //IOS browsers
setTimeout(function(){
navBar.removeClass(stickyDiv);
}, 7000); // however many milliseconds you need it to wait for
}else{
navBar.removeClass(stickyDiv);
}

Firefox mobile resizes screen when scrolling to bottom from JavaScript

there is a very interesting situation I am facing right now that I would like to ask about, I have a web site which is called from any device (Tablet, smarthphone, Laptop, etc.) and I have a problem only with Firefox on the smarthphones, here is the scenario:
There is a page that has a text box at the end, when the text box is focused the keyboard comes out (I mean in the smarthphones) and takes part of the screen, for the user to see the textbox and what is he writing I execute a javascript function in the onfocus event of the textbox that scrolls to the end of the page, I have tried with two different aproaches having the same result:
function scrollToMe(tBox) {
var element = document.getElementById(tBox);
setTimeout(function () { element.scrollIntoView(true); }, 600);
return false;}
Here tBox is the textbox, I just scroll down to him after 600 miliseconds.
function scrollInPage() {
var element = document.getElementById('theDIV');
setTimeout(function () { element.scrollTop = element.scrollHeight; }, 600);
return false;}
Here I apply scroll to the general div.
Both functions work perfect in all mobile browsers I have tested except in Firefox, the div mentioned above has nothing special, just has the overflow:scroll; property in the css, here is how it looks the page after the scroll down function in all other mobile browsers I have tested:
The page moves to the end, this works in Chrome, Opera Mini, Safari, Dolphin, Default Android Browser, Web Browser, Chrome Dev and Ghostery.
But this is what Mozilla does after the scroll function is executed:
It just resizes the div, only Firefox in the Smarthphones does it and after more than 8 hours trying to solve it and searching in Internet any clue on how to do it I would like to ask if someone has an idea of what could be the issue.
I am testing with a galaxy Note 4, a Galaxy S4 and Galaxy S3 Mini (Firefox 48 for all of them), it does the same in all of them.
Many thanks in advance for any answer and comment.

Scroll movement not working in Safari

I use below JavaScript for scrolling, but it doesn't work in Safari.
I remove this below code which was working in Safari, but not working smoothly.
Link is here
jQuery(".scrollBg a").click(function(event){
event.preventDefault();
var window_width = jQuery(window).width();
// alert(window_width);
//jQuery('html').animate({scrollTop:jQuery(this.hash).offset().top-38+'px'}, 1000);
if(window_width<=375){
jQuery('html').animate({scrollTop:jQuery(this.hash).offset().top+60+'px'}, 1000);
}
else if(window_width<=500){
jQuery('html').animate({scrollTop:jQuery(this.hash).offset().top+60+'px'}, 1000);
}
else {
jQuery('html').animate({scrollTop:jQuery(this.hash).offset().top-38+'px'}, 1000);
}
});
Please, do you know of a working smooth scroll for Safari?

OMG. Don't reinvent the wheel. You should use
http://cubiq.org/iscroll-5
It works for any browser (safari, chrome, safari mobile, chrome mobile, ffox).

For anyone interested, Safari's scroll animation needs to be enabled under Safari > Develop > Experimental Features > CSSOM View Smooth Scrolling. Most users won't have this option enabled as it is not enabled in Safari by default, however the browser will still move to its intended target. Use this:
window?.scrollTo({ top: ref?.current?.offsetTop - 48, behavior: "smooth" });
Where 'ref' is your intended target. All other major browsers support animation out of the box. To see full support go to CanIUse.

Detect if browser has smooth scrolling feature already

I have added smooth scrolling to a site of mine using this piece of JavaScript when clicking on hash links.
$('a[href*=#]')
.click(onAnchorClick);
function onAnchorClick(event)
{
return ! scrollTo(this.hash);
}
function scrollTo(target)
{
var e = $(target);
var y = e.exists() ? e.offset().top : 0;
if(y == 0 && target != '#top')
return false;
if(Math.max($('html').scrollTop(), $('body').scrollTop()) != y)
$('html,body')
.animate({scrollTop: y}, 500, function() { location.hash = target; } );
else
location.hash = target;
return true;
}
$.fn.exists = function()
{
return this.length > 0 ? this : false;
}
Works fantastic in desktop browsers and looks to work fine on at least iOS devices as well. However, on my WinPhone 8 device it was garbage. Scrolling was a mess and didn't even end up where it should. So I decided to not enable it there through an if( ! /Windows Phone 8\.0/.test(navigator.userAgent)).
Now it works well, and seems the browser on the WinPhone actually is smooth scrolling by default, which is great.
But it is of course a bit dumb to have a smooth scroll script active if the browser already does this by default. Is there a way I can detect if a browser already has a smooth scrolling feature enabled?

I managed to solve it this way:
<style>
body {
scroll-behavior: smooth;
}
</style>
<script>
if(getComputedStyle(document.body).scrollBehavior === 'smooth'){
console.log('This browser supports scrollBehavior smooth');
}
</script>

Yes and no. Unfortunately there are no standards for these types of things. However there are work arounds, one of which you are already doing: browser sniffing.
Basically, that's about as advanced as this kind of detection goes because some browsers don't yet even support smooth scrolling officially or without experimental developments (like Chromium). And standards won't be set unless the majority are on the same page. Not only that but it also comes down to GPU hardware abilities as some devices and computers struggle with smooth scrolling and animations. So technically speaking, even if a browser did support smooth scrolling, who's to say the device or desktop running it can render fast enough to even display the effect. That's another bottle neck.
I believe someday in the future there will be more of a need for browser feature specifications such as this to better improve user interactions, but until that day you're doing it right.

Several years later, there now is a CSS property in the Working Draft for this:
scroll-behavior 🎉
So instead of the Javascript in my original question, or similar, we can just do this:
html {
scroll-behavior: smooth;
}
#media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Right now, it seems to work for all browsers except IE and Edge, and since this is just a nice-to-have feature that makes things look a bit nicer... Yeah, I don't really care about IE or Edge. 😛👍

css3 poor animation performance (Chrome only)

I'm working on a site using css3 animations, it works perfectly in Safari and Firefox, but for some reason performance in Chrome is awful. (around 15 fps)
http://triple-tested.com/animations/
The animations are quite simple, basically a few large circles layered up. I've also added a few png sprite animations using javascript.
I know about hardware acceleration but I don't think that is the problem, it seems to be some quirk that is unique to Chrome. The css animations perform 'OK' alone but once I add the sprites performance drops considerably.
$.fn.spriteme = function(options) {
var settings = $.extend({ framerate: 30 }, options);
return this.each(function(){
var $el = $(this),
curframe = 0,
width = settings.width,
fr = 1000/settings.framerate;
(function animloop(){
if(curframe == settings.frames) { curframe = 0; }
$el.css('background-position', (curframe*width)*-1 + 'px center');
curframe++;
setTimeout( animloop, fr );
})();
});
};
This is the code I've wrote to animate my sprites, but as I said it performs perfect in Safari and Firefox so I don't think it's the problem. Chrome seems to have an issue with animating using css alongside sprites.
I've tried everything I can find online but if anyone has any suggestions please let me know.
I'm using the latest stable chrome on mac btw (17.0.963.93)
You can see the css (using less) here btw
http://triple-tested.com/animations/css/style.less

Thanks for the replies guys, I think it is an issue with certain versions of chrome as it works perfect in the latest canary builds.
I ended up stripping back some of the animations for chrome, falls back gracefully to static images.