Я пытаюсь использовать фоновое изображение как спрайт, на элементах с переменными размерами. Поэтому я использую процентные значения для background-size и background-position.Является ли Opera неправильным положением и/или размером фона с процентными значениями?
У меня возникла проблема с этим в Opera (последняя версия, 12.14). Я подозреваю, что это комбинация background-position и background-size с процентными значениями, которые вызывают неправильное поведение. Я тщетно искал любую релевантную информацию или признанную проблему.
Чтобы продемонстрировать проблему, с которой я столкнулся, я создал изображение размером 560 на 560 пикселей, в основном оранжевое, за исключением синего квадрата в нижнем правом углу, размером 112 на 112 пикселей, на одну пятую размер изображения.
Чтобы применить это изображение в качестве фона для элемента, так что синий квадрат полностью и точно покрывает ее, независимо от размеров элемента, я использовал следующий стиль:
.square
{
background-size: 500% 500%;
background-position: -400% -400%;
}
Это отлично работает во всех браузерах, но Opera, которая показывает оранжевый вокруг правого и нижнего краев элемента. Я предполагаю, что эти оранжевые ломтики - это повторяющееся фоновое изображение, как будто Opera смещает изображение дальше, чем нужно.
Я создал a jsfiddle test that demonstrates the issue, который вы можете просмотреть в 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
я был в состоянии собрать некоторую информацию, которая может обеспечить некоторые подсказки:
Чем больше изображение и дальнейшие он смещен (т. е. чем больше значения для фонового положения), тем дальше Opera становится ошибочным.
Опера отображается правильно, если элемент имеет размер синего квадрата (112 на 112 пикселей в этом случае - вы можете видеть это в jsfiddle).
Опера отображается правильно, если (скобки) размеры изображения кратные 100 (то есть 500 на 500 пикселей, а не 560 на 560 пикселей).
На данный момент я предполагаю, что это ошибка в Opera, поскольку она работает по желанию во всех других браузерах. Мои вопросы:
Это справедливое предположение или, возможно, даже известная проблема? Является ли Opera нарушением соответствующих спецификаций?
Есть ли исправление или обходное решение, кроме как повторно отобразить изображение до размеров, кратных 100?