Потеря четкости текста (размытие) при масштабировании div по элементу с фиксированной позицией (в мобильном браузере Safari / Webkit) - PullRequest
Новая
       21

Потеря четкости текста (размытие) при масштабировании div по элементу с фиксированной позицией (в мобильном браузере Safari / Webkit)

3 голосов
/ 28 ноября 2011

Код репро прилагается. Он (в основном) содержит два элемента div: красный (фиксированный) и черный (с текстом). При нажатии на черный div он масштабируется и текст на нем остается четким. Однако через 4 секунды z-индекс черного div изменяется, и черный div становится равным сверх красного div. Бум! Здесь текст становится размытым (что является большой проблемой).

«Эффект» особенно заметен на iPhone 3GS, менее заметен на iPhone 4.

Вопрос в следующем: есть ли решение / обходной путь для настройки каждого кода, но не кода красного div, чтобы текст на черном div оставался четким?

Я здесь для любых вопросов / запросов на разъяснения. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1255">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
    $(function() {
        $("#main_div").bind("click", function() {
            $("#wrapper").css({"z-index": -1});
            $("#main_div").css({"-webkit-transform": "scale(1.4)"});

            setTimeout(function() {
                $("#wrapper").css({"z-index": 2});
            }, 4000);

            return true;
        });
    });
</script>
<title>Title</title>
</head>
<body>

<div id="wrapper" style="position: absolute; z-index: 2; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
    <div style="position: absolute; width: 972px; height: 598px; ">
        <div id="main_div" style="position: relative; height: 375px; width: 610px; background-color:rgb(2,2,2); -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px;">
            <div style="position: relative; padding-top: 26px; padding-right: 10px; padding-bottom: 26px; padding-left: 10px; font-size: 10px; ">
                <div style="display: inline; font: normal normal normal 14px/normal arial; color: rgb(150, 150, 150); ">
                    <span>Here is some TEXT</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="position: fixed; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
    <div style="position:fixed; bottom:0; right:0; width:70%; height:30%; background-color: red;"></div>
</div>
</body></html>

1 Ответ

0 голосов
/ 16 декабря 2011

У меня были похожие проблемы с элементами с фиксированной позицией, которые погружались за элементы с относительной позицией при масштабировании контента с относительной позицией.Я был полон решимости найти решение.

Когда я изменил элемент с относительным расположением обратно на статический, все было хорошо, но затем этот элемент покрывался элементами фиксированного положения.По этой причине я изменил этот элемент на относительный для начала ... чтобы я мог добавить к нему z-index.

Я также пытался динамически назначать стили CSS позиции и z-index, но это тоже ничего не изменило.

Затем я удалил «левый» стиль CSS из таблицы стилей и динамически назначил стиль «вправо» через JS со значением, равным ширине окна, за вычетом ширины фиксированногоЭлемент -position, и это, похоже, улучшило проблему, но не на 100%.

Затем я нашел вашу ветку здесь и попробовал ваш код.Я загрузил HTML-файл с вашим кодом на свой сервер, затем загрузил эту страницу в свой iPhone и попытался увеличить масштаб.Я не видел таких проблем с размытым текстом.Достаточно странно.

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

Таким образом, похоже, что это ошибка, возможно, вызванная нехваткой памяти или чем-то.Я не уверен на 100%, но, не имея возможности воспроизвести проблему так легко, может быть трудно сообщить о такой ошибке команде разработчиков Apple iPhone / Safari Mobile.: \

...