posted by Pete Wow. Ok, here’s an interesting one.
So, I’m building a slider for a client where you have a container DIV with a number of child DIV’s inside of it to display individual pieces of content per slide. The premise of this is the same as a number of sliders that are out there built in JQuery. Upon a click, the DIV just moves to the left or right to display different parts.
The way you normally hide everything that’s not appearing in the window is by using:
div { overflow: hidden; }
Easy enough. Or so I thought. The problem here is very specific. It actually only occurs on PC versions of Firefox, and even then, only when the content is sliding behind other content on the page. For example, if my slider is floating to the right, and I have some different content floating to the left, as the slider is sliding, the content on the left will start flickering uncontrollably in Firefox on the PC.
This boggled my mind. Especially as it didn’t occur in any other browser out there, even IE6. The solutions going to kill you… well maybe… it killed me.
The Fix:
Simply specify the plane of the overflow. So, if your slider is going horizontally use:
div { overflow-x: hidden; }
And if your slider is going vertically use:
div { overflow-y: hidden; }
Yeah… That’s it. Literally about 2 hours of head scratching and teeth gnashing and nearly window punching boiled down to the addition of 2 lousy characters.
Well, live and learn right? Hopefully if you’ve found this post and have the same problem you can save yourself some tape dispenser hurling.
Dude, you just saved me. I’ve been fighting with and googling for a solution to this problem off and on for weeks. Thank you!
Hey Joel, just glad to be able to help alleviate a little aggravation. It’s little stuff like this that can drive me through a wall
You legend.
Just been giving everything a z-index, wrapping in more divs and generally going totally mental over this.
Why the hell does overflow-x work when overflow doesn’t?
ZomG!!! 3 days of hair pulling and cussing as a slider I’m using slides an iframe perfectly to the left in opera 10.10, IE6 (can you believe?) but in firefox 3.5 it messes up the display dragging content and text along with it and causing ‘flicker’ …overflow-x: hidden; fixed the problem when everything else I tried failed O_O
I nominate you for president! thanks so much for the help!!!
haha, nomination accepted.
Seriously, I completely understand the frustration. I wrapped mine in divs and divs and divs. Works in every browser but Firefox which makes it all the more mind boggling. And then yeah, this solution which I believe is just a Firefox bug.
Just glad it could hopefully save you some hair. (You still have some left right?)
first of, beautiful website, love the header…
secondly, i recently discovered that the portfolio page on my portfolio flickered on firefox when i slided up the photography block while i had both my works and photography sections expanded…i tried applying your fix to the content block in which they both reside but to no avail…can u look at the problem and verify if its the same issue i am facing?
Thanks for the compliment Uzair.
As for your site, are you referring to the DIV with the id designbox on the site linked from your name? If so, I’m not seeing the plane of overflow applied. Since your scroller is moving horizontally, you’d want to apply it across the X access:
div id=”designbox” style=”overflow-x: hidden; width: 390px; height: 284px;”
Hope that helps!
thanks for taking out the time Pete, but i was referring to the portfolio page which can be accessed at: http://www.uzairs.com/portfolio.php. You would see two headings, works and photography, if you expand both and then toggle the photography block, the page flickers on firefox. I tried applying overflow-y:hidden to both the content block within which the two blocks exist and the photography block but it didnt help. NOTE: I only tested it out through firebug. Thanks.
Hi Pete, Im sure my heartrate shot up to an excitable and optimistic 160bpm+ when I started reading that just adding the -x or -y would finally fix this beast for me, which I guess only exagerated the utter despondency when it didnt seem to work.
Maybe a similar issue to Uzair above but I have coded the overflow-y styling into my ‘#main’ div (and can see it in Firebug) but the bugger is still flickering its way back up the screen when I collapse.
http://www.thebeverley.com
Am I missing something perhaps or is this not quite the messiah I was looking for? Many thanks.
Hi Darryl,
Sorry for your frustration. Actually, the reason your getting your flicker is different from the problem illustrated here.
Your expand/collapse is actually increasing the entire height of your site (which you obviously already know) increasing the vertical scroll bar. When its collapsed, the entire height of the site decreases back. The flicker comes from the browser being pushed back up.
There is no known work around for this issue.
HOWEVER! hehe. What I would do is actually scroll the window back up to the top BEFORE you collapse the DIV. This way, the browser window will be at the top whilst the viewing area gets smaller, and then you shouldn’t have any flicker.
And lucky for you, there’s already a jQuery add on for this very thing. Its called jQuery.ScrollTo and it can be found here:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
So, what you’ll have to do is modify your on click like this:
jQuery(‘a#slick-slidetoggle’).click(function() {
// Only scroll up if we’re closing the DIV
if (jQuery(‘#main’).height() != 0) {
jQuery.scrollTo( jQuery(‘#header-wrap’), 800 );
}
jQuery(‘#main’).slideToggle(800);
return false;
});
This should scroll the window up to the top before it collapses your DIV — This should stop the flicker (hopefully) Let me know how it goes
*Note — i’m making it go to the div with ID header-wrap since its at the top of your page.
Hi Pete,
Thanks so much for your efforts! I wasnt able to get the JQuery snippet you suggested to work Im afraid but subsequently found a very similar workaround that has the same effect I think:
jQuery(‘html’).scrollTop(0);
Obviously with speed ‘0′ the page jumps up to the top and if I slow down the speed of the scrollTop to say 800 (as your example would) then I get the same sort of flickering as both the collapse and scrollTop events happen at the same time and sort of fight each other I guess.
So I think I am left deciding whether it is more acceptable to skip up to the top of the page sharpish or flicker my way back up. (Neither hardly ideal for the user – ho hum).
Again thanks for your direction.
)
(meant to say above that I think part of my problem with the scrollTo snippet was the if statement… but too much of a beginner to know how to set it right. thanks)
You know, I figured they might run at the same time which defeats the purpose — I forgot one important caveat — we want to run the collapse function AFTER the scroll function has completed:
jQuery('a#slick-slidetoggle').click(function() { // Only scroll up if we’re closing the DIV if (jQuery('#main').height() != 0) { jQuery.scrollTo( jQuery('#header-wrap'), {duration: 800, axis:"y", onAfter:function(){ jQuery('#main').slideToggle(800); }); } else { jQuery('#main').slideToggle(800); } return false; });Thank you so much! I would have never figured that out without your help, the day is saved!!!
hey
That’s great solution. i wasted my more then 3 hours to solve that problem i used event.preventDefault() but that’s not work but your solution is magic and working great.
Keep it up this kind of programing
thankx a lot.
YOU ARE THE MAN!!!!! Ive been going bazonkers over this forever.
I don’t want to think about how many days I have been trying to figure this one out. Your post sorted me right out. Let’s just hope the client likes the new functionality. I’ll try post a link to the site when it goes live. Thanks!!
Jquery toggle accordion slide issue in firefox. please check in 15 inch monitor so that you will come to know the issue.
http://www.enticesolution.com/jquerytoggle/index.html
click any of the link for e.g 4th link i.e.
Why does Viren Soft hide columns, and what can I do to get them back?
then scroll down and click the last link (How can I contact Viren Soft Technologies)
you will notice that the page will either flicker or will disappear for a second and then appear again. this happens only in firefox. the flickering is a lot when this particular functionality is included in a complex css layout.
is there a solution for this?
Thank you so much! I just finally had gotten the menu to work right in the other browsers, but hadn’t checked Firefox on the final draft yet. I was very frustrated when it didn’t work in Firefox, and I had even added overflow:hidden with no luck. I added the y in there and it fixed it!
You’re da MAN!