前提・実現したいこと
Windows版Firefoxで、Canvasの上にDOMのテキスト(div、pタグ等)を重ねると、なぜか文字の背景が透過されず黒く塗りつぶされてしまいます。
原因や解決策に心当たりがありましたら、よろしくお願いします。
(追記)
Windowsですが、Macの仮想環境(Parallels Desktop)での現象になります。
すみませんが、Windowsネイティブでの表示検証はできておりません。
仮想環境上のみで起こる現象の可能性もあります。
<style> #test { color: #fff; position: absolute; top: 200px; left: 200px; z-index: 2; } canvas { z-index: 1; } </style> <div id="container"> <div id="test">テストテストテスト</div> <canvas id="canvas"></canvas> </div>
試したこと
Windows版Firefoxで、canvas要素の上にテキストを重ねた時のみ起こる現象のようです。
z-indexで重なり順を逆にして、テキストの上に透過したCanvasを重ねた場合は問題ありません。
テキストを上に重ねた時のみこの現象が起きます。透過pngなど画像では問題ありません。
マークアップを変えたり色々と試しましたが、例外なく起こりました。
補足情報(FW/ツールのバージョンなど)
Macの仮想環境上(Parallels Desktop)での現象になります。
ネイティブでの表示検証はできておりません。
仮想環境上のみで起こる現象の可能性もあります。
Windows8.1、Windows10のFirefoxで現象を確認しました。
それ以外のブラウザやMac版Firefoxでは問題なく透過されて表示されます。
あなたの回答
tips
プレビュー