4

Android ブラウザでこのフィドル ( http://jsfiddle.net/5ajYD/ ) を見ると、花を構成する PNG の背景が白であることがわかります。

Android ブラウザを除いて、他のすべてのブラウザでは完全に正常に表示されます。私はこの問題をグーグルで調べましたが、見つけることができるのは、png バンディングと Android アプリのプログラミングに関連する問題だけです。

これは、MSIE 6 の透明な画像に関する問題を思い出させます。これが起こるのは非常に奇妙です。

Androidブラウザでこの問題の修正を知っている人はいますか? ブラウザごとにグラデーションが異なるため、透明でない背景は使用できません。

私がこれまでに試したこと：

  • 両方とも位置 0px 0px に配置された「複数の」背景を使用しようとしましたが、うまくいきません
  • 花で div にグラデーションを追加しようとしましたが、それも失敗し、他のブラウザーで壊れました。

この種の問題が最新のブラウザで発生することは非常に不可解です... nokia n95でさえ正しくなります....

私がテストしている/これを見つけたAndroidバージョンは、Android 2.3.4（Sony Ericsson Xperia Arc S LT18i）です

これは、電話のAndroidブラウザのフィドルで見られるものです

http://t.co/mofPkqjf

4

2 に答える 2

1

私は大きな手のひらの瞬間を過ごしました。

私はこれと2か月間戦ってきましたが、論理を理解できませんでした. 問題は、幅: 100% というパラメーターを持つ econtainer 要素にありました。

何が起こるかというと、ビューポートの実際のページ幅までの幅のみをレンダリングするということです。

したがって、幅が 480 ピクセルのモバイルのブラウザー画面がある場合、幅が 480 ピクセルに設定され、480 ピクセルのグラデーションがレンダリングされ、横にスクロールしても再レンダリングされません。

この問題は、min-width:1200px; を追加することで解決されました。正しくレンダリングされるようになりました。

これを調べてくれてありがとう...

于 2012-12-05T13:49:17.513 に答える
1

HTML5 Canvas を使用してalphaJPEGを作成します。これは、アルファ チャネルを持つ同等の PNG の下にレイヤー化された JPEG です。

<head>
  <style>img[data-alpha-src]{visibility: hidden;}</style>
</head>
<body>
  <img src="image.jpg" data-alpha-src="alpha.png" />
  <!--...-->
  <script src="ajpeg.js"></script>
</body>

ajpeg.js

(function() {

  var create_alpha_jpeg = function(img) {

    var alpha_path = img.getAttribute('data-alpha-src')
    if(!alpha_path) return

    // Hide the original un-alpha'd
    img.style.visiblity = 'hidden'

    // Preload the un-alpha'd image
    var image = document.createElement('img')
    image.src = img.src
    image.onload = function () {

      // Then preload alpha mask
      var alpha = document.createElement('img')
      alpha.src = alpha_path
      alpha.onload = function () {

        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        img.parentNode.replaceChild(canvas, img)

        // For IE7/8
        if(typeof FlashCanvas != 'undefined') FlashCanvas.initElement(canvas)

        // Canvas compositing code
        var context = canvas.getContext('2d')
        context.clearRect(0, 0, image.width, image.height)
        context.drawImage(image, 0, 0, image.width, image.height)
        context.globalCompositeOperation = 'xor'
        context.drawImage(alpha, 0, 0, image.width, image.height)

      }
    }
  }

  // Apply this technique to every image on the page once DOM is ready
  // (I just placed it at the bottom of the page for brevity)
  var imgs = document.getElementsByTagName('img')
  for(var i = 0; i &lt; imgs.length; i++)
    create_alpha_jpeg(imgs[i])

})();

In the head element I linked to FlashCanvas:

<!--[if lte IE 8]><script src="flashcanvas.js"></script><![endif]-->

... and I threw in this to avoid a flicker of the un-alpha’d JPEG:
于 2012-07-11T18:13:58.573 に答える