可変寸法の要素で、背景画像をスプライトとして使用しようとしています。したがって、 と にはパーセンテージ ベースの値を使用していbackground-sizeますbackground-position。
Opera（最新バージョン、12.14）でこれに問題が発生しました。誤動作の原因となっているのは、パーセンテージベースの値とbackground-positionの組み合わせであると思われます。background-size関連情報や認識されている問題を探しても無駄でした。
私が直面している問題を示すために、560 x 560 ピクセルの画像を作成しました。主にオレンジ色です。ただし、右下隅の青い四角は 112 x 112 ピクセルで、画像のサイズの 5 分の 1 です。 .
要素のサイズに関係なく、青い正方形が要素を完全かつ正確に覆うように、この画像を要素の背景として適用するために、次のスタイルを使用しました。
.square
{
background-size: 500% 500%;
background-position: -400% -400%;
}
これは、要素の右端と下端の周りにオレンジ色が表示される Opera を除くすべてのブラウザで完全に機能します。これらのオレンジ色のスライスは、Opera が必要以上に画像をオフセットしたかのように、繰り返される背景画像であると推測されます。
この問題を示す jsfiddle テストを作成しました。これを Opera で表示すると、説明した望ましくない動作を確認できます。
の上部から取得した Opera の詳細opera:about:
Version information
Version: 12.14
Build: 1738
Platform: Win32
System: Windows 7
Browser identification
Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14
いくつかの手がかりを提供するかもしれないいくつかの情報を集めることができました：
画像が大きく、オフセットが大きいほど (つまり、background-position の値が大きいほど)、Opera はさらにそれを間違えます。
要素が青い正方形のサイズ (この場合は 112 x 112 ピクセル - jsfiddle で確認できます) と正確に一致する場合、Opera は正しくレンダリングします。
画像のサイズが 100 の倍数 (つまり、560 x 560 ピクセルではなく 500 x 500 ピクセル) の場合、Opera は正しくレンダリングします。
現時点では、これは Opera の障害であると推測しています。他のすべてのブラウザでは問題なく動作するからです。私の質問は次のとおりです。
これは公正な仮定ですか、それとも既知の問題ですか? Opera は関連する仕様に違反していますか?
画像を 100 の倍数のサイズに再レンダリングする以外に、修正または回避策はありますか?