SafariにポストjQueryのフラッシュがあるのはなぜですか？

Question

私は、ホバリング（上）まで隠し、ホバリング（外）で再び隠す簡単な検索ボックスを持っています。 Firefoxではすべて正常ですが、Safariではフルバーが表示されているhideアニメーションの後に小さなフラッシュがあります。自分のサイトのホームページ（Safariのみ）：stormink.netで何が起こっているかを見ることができます。

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

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; 
     } 

とjQuery：

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

は（検索ボタンを右上の隅にある）

ここではHTMLですこれを取り除く方法はありますか、それとも標準のjQueryですか？それはかなり気を散らすだろう。幸いにもそのSafariでFirefoxではなく、まだ非常に楽しい...

ありがとうございます！

Answer 1

それがなぜ起こるか私はわからないんだけど、役立つかもしれない一つのことは、非表示機能のための第二、オプションのコールバックfuncitonを利用するには、次のようになります。

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

あなたのを修正する必要があります1つのオブジェクトなので、これを行うには若干設計してください。右上にsearchBox_triggerという固定divを置き（CSS：position: fixed; right: 0; top: 0;）、これをホバーイベントに使用します。背景を小さな検索アイコンに設定します。

かもしれませんが、正しく見えるようにするにはもう少し遊ぶ必要があります。

ところで、私はデザインが大好きです。一度あなたがそこにいくつかのコンテンツを取得すると、それは素晴らしいだろう。あなたは本当に才能があります。 :)あなたは仕事のためのデザインをしていますか？