jquery - jQueryフェードアウトdivがフラッシュオブジェクトの上にあるときに境界線を正しく表示しない

Question

初めての投稿...私に気楽に行ってください:-)

クライアント用のQRコードテストランディングページがあります。

http://www.woodfold.com/qr

私はサイトを開発しませんでしたが、現在変更を担当しています。

今のところ、クライアントは単純なありがとうボックスが表示され、QRコードページにアクセスしたときにフェードアウトすることを望んでいます。単純なdiv、cssを作成し、フェードアウト効果のためにjQueryを使用しました。

このサイトでは、画面の上部に.swfムービー/ローターがあります。

ブラウザが映画の下にQRありがとうメッセージを表示するのに十分なサイズである限り、コードは正常に機能します。

ブラウザ/画面のサイズがメッセージをムービー領域にプッシュするのに十分小さい場合、FFおよびOperaは丸みを帯びた角を正しくレンダリングしません。メッセージがムービーの下に表示されると、正しくレンダリングされます。

ばかげた単純なものが欠けていると確信していますが...これを引き起こしている原因について誰かが知っていますか？関連するコードスニペットは次のとおりです。

    <div id="qrThanks">
        <img src="../i/qrSmall.png" title="Woodfold QR Code" alt="Woodfold QR Code" />
        <p class="qrContent">Thank you for using Woodfold's QR Code!</p>
    </div>
    <div id="contentContainer">
        <div id="flashContainer">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="731" height="312">
                <param name="movie" value="http://woodfold.com/flash/superhomeFlash.swf" />
                <param name="wmode" value="transparent">
                        <!--[if !IE]>-->
                        <object type="application/x-shockwave-flash" data="http://woodfold.com/flash/superhomeFlash.swf" width="731" height="312">
                        <!--<![endif]-->

                            <img src="slide.gif" alt="slide" width="731" height="312" />
                        <!--[if !IE]>-->
                        </object>
                    <!--<![endif]-->
            </object>
        </div> 

js / jQuery

<script type="text/javascript" src="../scriptz/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
     $('div#qrThanks').show();
     window.setTimeout(function() {
     $('div#qrThanks').fadeOut('slow');
     }, 2000);
});
</script>

CSS

#qrThanks {
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -100px 0 0 -250px;
text-align: center;
z-index: 1000;
width: 500px;
height: 100px;
background-color: #FFF;
box-shadow: 5px 5px 3px #000;
border: 10px solid #ccc;
border-radius: 10px;
}
#qrThanks img {
margin: 20px 10px 20px 20px;
padding: 0px;
width: 60px;
float: left;
box-shadow: 5px 5px 3px #000;
}
.qrContent {
display: block;
margin: auto 0px;
font-size: 20px;
line-height: 100px;
}