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.
Related
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);
}
I have HTML page which contains a lot of sections. Content of these sections is loaded lazily. After page load, user is scrolled to some particular section. Then content above and below the section is loaded and inserted. Obviously inserting content above changes scroll position so I need to maintain scroll position relatively to the current section.
I have implemented the simplest solution which works perfectly in Chrome, FF, Edge and even IE11 but in Safari - it has glitches.
Here is the code:
function insertElementAbove() {
var elem;
// load elem
var prevOffset = window.pageYOffset;
// insert element
container.insertBefore(elem, container.firstChild);
// measure inserter element height and adjust scroll pos
var elemHeight = elem.offsetHeight;
window.scrollTo(0, prevOffset + elemHeight);
}
I assume that the last 4 lines are run synchronously so according to the browser rendering pipeline no repaint can be done in between:
But in Safari it seems that sometimes paint and composite happens before changing scroll. Why only Safari behaves like this? Can it be because of Safari use IOSurface framework (https://apple.stackexchange.com/a/56820)? Are there any ways to solve/workaround this behavior?
Here is plunkr.
The issue is not reproducible in iframe mode so go to the "Preview in separate window" using button in the top-right corner:
Safari: Version 10.0.1 (12602.2.14.0.7)
macOS Sierra: Version 10.12.1
I have a div that is resized to be at the full height of the viewport on load as well as on resize. The problem that I am having is that on Google Chrome for iOS (I haven't checked Android, but I can imagine that it displays the same erratic behaviours) if I scroll down, as usual the address/tab bar scrolls up. And as it does, it fires resize events. When that happens, the div and its contents jitter and cause scrolling to be come sluggish, as well as causing other oddities with the div below.
JSFiddle: http://jsfiddle.net/mseymour/9PEC4/
I would suggest setting the height of the .home-hero only once on an smartphone, by either checking the height of the window (could cause problems, it's inconstant) or user agent sniffing.
Here are some links:
http://detectmobilebrowsers.com/
What is the best way to detect a mobile device in jQuery?
Detecting a mobile browser
Then set the height only once since on a mobile you cannot really resize the window, and you don't need to resize it on every resize event.
if (isMobile) {
fullScreenSlide(); // resize once
} else {
setResizeEvent(); // Set the event for multiple resizes
}
function setResizeEvent() {
$(window).on("resize", function () {
fullScreenSlide();
}).resize();
}
function fullScreenSlide () {
var browserheight = Math.round($(window).height());
$('.home-hero').height(browserheight);
}
You want to do as little "things" on a smartphone since smartphones are really slow performance wise compared to a desktop
I'm trying to achieve a simultaneous menu/content scrolling, like on www.urplay.se. The following code is very slow in Firefox (Win & OSX) but works in all other desktop browsers. Any idea how to improve in FF?
Update: Fiddle, http://jsfiddle.net/2rCPD/
Update: the problem only occurs when scrolling with a mouse. A macbook trackpad works fine. Also, the scrolling is only slow when both divs are scrolling. Try it in the fiddle: when the blue left content stops scrolling, the red right content starts to scroll at normal speed.
function initiateDoubleScroll() {
$document.on('scroll.doubleScrollNameSpace', function () {
$myMenu.scrollTop($document.scrollTop());
});
$myMenu.on('scroll.doubleScrollNameSpace', function () {
$document.scrollTop($myMenu.scrollTop());
});
}
$myMenu is the left side wrapper div (look at urplay.se). The wrapper div extends full window height and has "overflow-y: scroll".
I have a web app that I am adapting to iOS5 using Phonegap. Everything works except for one issue:
My inner <div>s, which are set to scroll if overflowed and scroll perfectly if overflowed in Chrome do not scroll at all on the iPad.
--I have disabled app dragging by disabling touchmove;
--i have implemented (perhaps incorrectly?) the -webkit-overflow-scrolling:touch CSS property that is, apparently, new to iOS5 like so:
overflow: scroll;
-webkit-overflow-scrolling:touch;
Nothing seems to work.
If I comment out the javascript (from Phonegap) that disables app dragging (ie. touchmove), then the scrolling works but it drags and scrolls the entire app.
Any help would be appreciated.
This is more of a hack, but you can do some checking to see if you're touching the div or not, and depending on that, you prevent scrolling like so:
document.body.addEventListener('touchmove', function (e){
if(document.elementFromPoint(e.pageX, e.pageY) !== document.getElementById('yourdiv'){
e.preventDefault();
}
}, false);
MDN reference
I was able to prevent dragging of the main app/page by using the following code:
var myDiv = document.getElementById('idMyDiv');
myDiv.addEventListener('touchmove', function (e){
e.preventDefault();
}, false);