Как избавиться от осколка, который появляется между соседними элементами в Safari на iPad? - PullRequest
Новая
       2

Как избавиться от осколка, который появляется между соседними элементами в Safari на iPad?

1 голос
/ 15 ноября 2011

У меня есть два абсолютно расположенных смежных элемента, которые имеют одинаковый цвет фона.Они выглядят как один элемент на моем настольном компьютере и ноутбуке, но между двумя элементами при просмотре на iPad четко прослеживается своего рода «граница» - полоска полупрозрачного цвета.

Если бы мне пришлосьПолагаю, я бы сказал, что это связано с другим методом рисования векторных объектов в браузере в iOS, но это всего лишь предположение, основанное на некоторой расплывчатой ​​информации, которую я однажды услышал в своем выступлении.

Вот целый примерстраница, которая может показать проблему, если вы можете запустить ее на iPad: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            #container {
                position: relative;
                width: 200px;
                height: 40px;
                background-color: transparent;
            }

            #left {
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 40px;
                background-color: red;
            }

            #right {
                position: absolute;
                top: 0;
                left: 50px;
                width: 150px;
                height: 40px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="right"></div>
        </div>
    </body>
</html>

1 Ответ

0 голосов
/ 20 апреля 2012

Проблема возникает, только если Safari масштабирует страницу.

Safari масштабирует элементы по отдельности, что часто приводит к тому, что каждый элемент имеет полупрозрачный край шириной в 1 пиксель на одной или нескольких сторонах.Затем, когда масштабированные элементы размещаются рядом, перекрывающиеся полупрозрачные края все еще не являются непрозрачными на 100%, поэтому некоторые из фоновых элементов просачиваются сквозь.

Проблема не ограничивается абсолютно позиционированными элементами;он применяется ко всем смежным элементам (за исключением изображений, кажется).

Например, если для таблицы задан стиль td { background-color:black }, иногда между ячейками таблицы будут появляться субпиксельные фрагменты фона.Проблема возникает даже в двух соседних диапазонах.

Мое решение состоит в том, чтобы реструктурировать страницу так, чтобы смежные элементы одного цвета были обернуты в контейнер, а фон был применен к контейнеру.Это много работы.В вашем случае, быстрое решение было бы перекрыть div на 1 пиксель.

Я считаю, что это ошибка iPad.Ни один из моих браузеров Windows (включая Safari) не имеет этой проблемы при масштабировании страницы.

...