Why is there a post-jQuery flash in Safari?

Question

Hey all,

I have a simple search box that it hidden until hover(over) and hides again on hover(out). In Firefox all is normal, but in Safari there is a tiny flash after the hide animation where the full bar is visible. You can see what is happening (in Safari only) on the homepage of my site: stormink.net. (the search button is in the top-right corner)

Here is the HTML:

<form id="searchForm"> <label id="searchButton" for="searchBox" value="Search"></label>
<input id="searchBox" type="text" value="Search...">
</form>

The CSS:

#searchForm { float: right; background-color: #333333 }
    #searchButton { 
     display: block; float: left; 
     height: 24px; width: 32px; 
     background: url(/images/STORMINKsprite.png) no-repeat;
     background-color: transparent;
     background-position: -325px 0;
     }
    #searchBox { 
     display: none; float: left;
     margin: 5px 5px 0 0;
     padding: 0 3px;
     border: none;
     background-color: transparent;
     color: #ffffff;
     height: 15px;
     }

And the jQuery:

$(document).ready(function() {
    $('#searchForm').hover(
    function(){
        $('#searchBox').show('slow');
    },
    function(){
        $('#searchBox').hide('slow');
    }
    );
});

Is there any way to get rid of this, or is it just standard jQuery? It would be quite distracting. Luckily its in Safari and not Firefox, but still not very fun...

Thanks all!

Answer 1

I'm not sure why that happens, but one thing that might help would be to take advantage of the second, optional callback funciton for the the hide function:

$(document).ready(function() {
    $('#searchForm_trigger').hover(
    function(){
        $('#searchBox').css({display: "inherit"});
        $('#searchBox').show('slow');
    },
    function(){
        $('#searchBox').hide('slow', function() {
            $("#searchBox").css({display: "none"});
        });
    }
    );
});

You would have to modify your design slightly to do this, since it's all one object. Put a fixed div named searchBox_trigger in the upper right (CSS: position: fixed; right: 0; top: 0;) and use this for the hover event. Set its background to be the little search icon.

This might work, although you may have to play with it a little more to get it looking right.

By the way, I love the design. Once you get some content in there it's going to be amazing. You're really talented. :) Do you do design for work, or just play?