In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.
Related
So I'm currently working on http://coin.codeclimb.com and for some reason the owl carousel slider on the homepage is not working on iPhone safari. When I slide on iPhone it is swiping ALL the content on the whole page and breaking things. I can not replicate the problem on desktop. Therefore I can not use dev tools to identify the problem.
It's as if there are 15 slides when there is only 2, it just keeps letting you slide and the more you slide, the further it pushes all the content on the entire page, including the navigation.
Any ideas whats going on? I am using Safari on iPhone 7 Plus.
You have a couple of issues here:
overflow-x:hidden does not work on the body element in certain versions of mobile safari. This means that your content is spilling horizontally out of its container. This confuses the browser as it does not know which element it should be scrolling.
You have removed overflow:hidden from line 77 of owl.css, and added lines 1121 to 1134 of your style.css file, directly affecting the functionality of OwlCarousel.
The easiest solution is to add overflow-x:hidden to the html element instead of the body element, and remove your extra lines from style.css
In my case, even overflow-x: hidden on html element didn't work.
Instead, I added extra padding on body (20px on both sides) which solved the issue and worked fine for me even on small screen devices (iphone SE)
I have created my first microsite with Umbraco/ASP.NET at www.surreyhillsmt.co.uk. I started with a bootstrap theme called Agency from startbootstrap.com, and find that the smooth page scrolling from my menu works on the Edge browser and both Safari and Firefox on an iPhone/iPad.
However, smooth page scrolling does not work on either Firefox or Chrome on a PC (fully updated Windows 10, and both Firefox and Chrome installed within last couple of days). This problem is not exhibited by the static bootstrap theme that I used.
I would really appreciate any help. By way of background I am competent with C# and okay with HTML/CSS. I have zero knowledge of javascript and the like.
This is no longer a problem. Oddly this was fixed with the passage of time. I guess it was a caching related issue.
We have a website whose background is a stack of images through which we go with JavaScript.
We check whether the next image is loaded before switching to it, and it works fine on Chrome, Safari, IE, and all mobile browsers, however on Firefox we sometimes get a white flash.
This problem also happens if we make sure that all the images are preloaded so it's not a problem that FF shows the image before it has finished loading. I've seen the question asked elsewhere but from the user's perspective, and the solution was to disable hardware graphics acceleration, which does not solve completely the problem but reduces it. However we obviously can't ask that from our users.
Similar problems were reported in other questions:
jquery animate (height) causes background-image flickering in firefox
Image Flickering only in Firefox
Firefox background image flickering when using multiple instances and background-size
skrollr background image flicker in Firefox
However none has a clear solution. Does anyone know how to correct for this?
Cheers!
I have an issue with jQuery ScrollTo.
It skips and there is a lag when applied to my page.
Here's a link to the jsFiddle example that works and here is the same code applied to my page that does not work.
It might function correctly on some machines but all the machines I have tested this on don't!
Might there be an issue with the amount of images I am using?
Is there anything I can do to overcome this?
The problem there is the background image. On "poor peformances machines", using a full page background image like you did and scrolling is not very efficient.
For instance, my machine at work lags as hell on your page, either using the top menu or regular scrollbar. On the otherhand, my MacBook Pro handles your page perfectly with a smooth feel when using the top menu to scroll.
I tested it using chrome on my machine, and removing the background image using developers tools. It now works perfectly. As soon as I put the background image back, it starts lagging again.
Its a bit jumpy on my machine (your site that is), but one thing i noticed that may help is that it is really nice and smooth smooth if i very quickly click back and fourth between 'Senior Executive' and 'Experienced Hire'.
Is there any callback or some calculation being done before, during or after the scroll perhaps?
I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".
On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.
I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.
Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?
I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.
I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";
Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute.com/. They have a few ways of keeping something at the bottom.
Check out iScroll:
http://cubiq.org/iscroll-4
It seems to be one of the better options out there - definitely worth looking into.
I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.
Best of luck!Dan