2

私の質問はこの問題に関連しています:ストック Android ブラウザーでのぼやけた画像

より具体的な問題があることを除いて。

基本的に、Androidのデフォルトブラウザで画像がぼやける問題があります。position:fixedの要素がある場合z-index:20、画像も含む z-index が 20 以上のその他の要素 (decedent img 要素または背景画像を持つ要素) もぼやけて表示されます。つまり、鮮明な画像を確保するための最大 z-index 値は、ページ上の任意の position:fixed 要素の z-index よりも小さくなければなりません。私が何を意味するかを示すためのコード例を次に示します。

デモ URL: http://jl.evermight.net/blurryposition/z-index.html

コード：

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=0" />
    <style type="text/css">
    div {
        display:block;
        width:100%;
    }
a {
      background-image:url(logotest_big.jpg);
      background-size:60%;
            display:block;
            width:200px;
            height:200px;
      } 
  </style>

    </head>
    <body>
        <div id="top-nav-container"
        style="
    position:fixed;
        top:0px; 
    z-index:20;
        ">
      <a></a>
        </div>
        <div id="top-nav-container-2"
        style="
    position:absolute;
    top:300px; 
    z-index:40;
        ">
            <a></a>
        </div>



    </body>
</html>

このコードは、ぼやけた画像を示しています。しかし、position:fixed 要素が position:absolute 要素よりも大きくなるように z-index を変更すると、position:absolute 要素の画像が鮮明になります。

この問題を修正して、z-index が position:fixed 要素の z-index よりも大きいぼやけていない画像を作成するにはどうすればよいですか?

これは、一部のデフォルトの Android ブラウザでのみ発生します。私の場合、Galaxy note v1 の Android 4.0 です。

4

0 に答える 0