We Keep Coding

Element with fixed position bumps on scroll only in Firefox

I have a div with fixed position. When I scroll inside a component, I calculate position of another div in order to "stick" the fixed position div to it - so on every scroll position of a fixed element changes.
In chrome everything works correctly but in firefox I have a situation that after every scroll the fixed div "chases" div to its new position.
The strange thing is that when I turn on and off developer tools in firefox, problem disapears.
I don't understand why dev tools helps to workaround this problem and why in chrome it works correctly.
I know that this is a hack and it should be anchored to the div it is 'chasing' but in this case I don't have time to refactor implementation.

Chrome is showing a div at the wrong location

I'm moving some divs around and it works fine in Firefox and IE. But in chrome it freezes the display of the div sometimes (even though the div is actually still moving).
Also the div is cursor:pointer and when I hover over where it should be (not where it is drawn) only then the cursor turns to pointer.
Also if I switch tabs in chrome and switch back, it draws the div at the correct spot.
Also if I change anything about the div (like background color) in the "Inspect Element" window, the div snaps into place.
How do I fix this?
The light blue box is where the div really is internally. Notice all the boxes in the left column are not drawn at the correct spot.

I just found out that this only happens when one of the divs happens to move into a google ad. Then since this is Google chrome and a Google ad, it freaks out and shuts of rendering my content, so that I don't mess with their ads.
I guess the solution is to not allow your divs to run into ads, even though your divs are in a container that's away from the ads and has overflow:hidden. So the div that is hitting the ad isn't even being displayed but still chrome doesn't like it.

Chrome (webkit?) not displaying images correctly in a slideshow

I've read quite some posts about webkit browsers having issues with images. I couldn't find a post and thus an answer for the one I'm about to explain.
I created a home-made slideshow using jQuery that basically places all the images next to each other on a row and I then play with a mask element (overflow: hidden) and the margin-left property to select which one is to be displayed. I didn't reinvent the wheel...
On FF, Opera and even IE, it works like a charm! But I have no luck on Chrome (I didn't test Safari) : the first image shows ok but when the sliding effect kicks in, 20px-ish of the first slide remains at the top of the slideshow and overlay the second slide. If I carry on sliding, the first slide part remains as an overlay on the following slides. The images don't refresh ok on Chrome which makes the whole slideshow look rubbish.
I tried to play with the images css properties after the sliding effect to kind of force the container to refresh its content but again, no luck.
Does anybody have an idea on how to work that out?
Thank you

Found the fix...
As I said, trying to force the container to refresh its content using some different css properties didn't work.
What worked though was to add a span to the container, that's it... At the time of the issue, my container only had images in it and a map. I added a span (out of luck) and it worked straight away!
I can only assume why adding a span makes the whole container behave ok. I guess it is kind of the same than the "hasLayout" property IE6 used to throw at geeks. It couldn't render the element properly until it had an element that had a consistency (height, width ... set with a value).
Anyway, I hope this will help and yes, I did dare to compare Chrome to IE6... ;-)
Good day

How to make the dropdown in the top menu to appear without delay/animation?

I have a menu with a dropdown here. How do I make the dropdown to appear instantly, like on this site?
Edit: I figured out what causing the delay : dropdown wouldn't show up while the mouse is moving, it only shows when mouse is stopped.So if the mouse never stops on the menu item - dropdown would newer even showup...
Edit2: It appears, the problem is only presented in Chrome, FF and IE work as intended..

The problem is that the browser isn't loading your background image because it is initially hidden. The delay is caused by that image being requested from the server. I would pre-load it somehow-- maybe add a dummy pixel-wide div at the bottom of your page with that image as the background-image.

Why does jCaroussel Lite cut off text in some slides?

I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?

The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});