Позиция CSS: исправлено появление размытых изображений в Android-браузерах

Никто не ответил на этот похожий вопрос,

Размытые изображения на веб-браузере Android

Итак, я собираюсь опубликовать свою собственную версию, характерную для моей ситуации.

Проблема заключается в том, что position:fixed приводит к размытию элементов дочерних элементов изображения в некоторых браузерах android. В моем случае это приводит к тому, что браузер Android Galaxy Note v1 работает под управлением Android 4.0. Другие говорили то же самое для некоторых Galaxy S3. Здесь мой код:

Предварительный просмотр @http://jl.evermight.net/blurryposition/

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
    </head>
    <body>
        <div id="top-nav-container"
        style="
        display:block;
        top:0px; 
        position:fixed;
        width:100%; height:5.2rem;
        ">
            <a style="background-image:url(logotest_big.jpg);
            background-size:20%;
            display:block;
            width:500px;
            height:200px;
            "></a>
        </div>


    </body>
</html>

Вы заметите, что логотип OPTIX Testing сначала размыт. Если вы удалите position:fixed из #top-nav-container, логотип станет четким и понятным. Итак, мой вопрос: как сохранить и position:fixed и четкий логотип?

На моем реальном сайте верхняя навигационная система должна оставаться фиксированной, пока вы просматриваете сайт. Я попытался использовать position:absolute и использовать javascript для перестановки верхней навигации по прокрутке, но это вызвало целую кучу эффектов перехода/мерцания. Поэтому, если я не могу использовать position:fixed или position:absolute, чтобы исправить верхнюю навигацию в верхней части мобильного веб-браузера, каковы мои другие варианты? Как другие мобильные сайты достигают этого результата?

Дополнительная информация:

Я сделал еще несколько экспериментов с изменением размера изображения, изменением порта представления и изменением положения: фиксированным/абсолютным и получил некоторые интересные результаты. См. Ниже:

  • позиция: фиксированный размер без фонового изображения с видом - нечеткий
  • позиция: фиксированный размер без фонового изображения без просмотра - четкий
  • позиция: фиксированный фон-размер: 20% с-viewport - нечеткий

  • позиция: фиксированный размер фона: 20% без просмотра - нечеткий

  • позиция: абсолютный no-background-size с-viewport - нечеткий

  • позиция: абсолютный размер без фонового изображения без просмотра - четкий
  • позиция: абсолютный размер фона: 20% с-viewport - четкий
  • позиция: абсолютный размер фона: 20% без просмотра - четкий

Здесь, как прочитать этот график:

  • В первом столбце указано, используется ли #top-nav-container позиция: фиксированная или позиция: абсолютная

  • во втором столбце указано, что я использовал background-size:20%, или если я опустил его

  • В третьем столбце указано, включен ли я в тег <meta viewport> в голове

  • В четвертом столбце указано, является ли логотип тестирования optix нечетким или четким.

Посмотрев на результаты, вы увидите, что единственный раз, когда вы получаете четкое изображение с контейнером с позицией: исправлено, когда изображение не растягивается или не сжимается с помощью фонового размера или с портом представления. Кроме того, единственный раз, когда вы получаете нечеткое изображение с контейнером с позицией: абсолютный - это когда изображение растянуто с размером фона и с видовым экраном.

Ответы

Ответ 1

Использование position: fixed по-прежнему является плохой идеей для мобильных устройств. Подавляющее большинство веб-сайтов возвращается к статическому заголовку для мобильных представлений (т.е. Плавающего навигатора).

Недавно я столкнулся с подобными проблемами, как показано на этом вопросе.

Несколько ресурсов для вас:

Ответ 2

добавить &nbsp; внутри top-nav-container.

<div id="top-nav-container"
    style="
    display:block;
    top:0px; 
    position:fixed;
    width:100%; height:5.2rem;
    ">
        <a style="background-image:url(logotest_big.jpg);
        background-size:20%;
        display:block;
        width:500px;
        height:200px;
        "></a>
        &nbsp;
    </div>

У меня тоже возникла проблема при создании фиксированной панели действий с div, использующей фоновое изображение в качестве значка. Но когда я добавляю текст в эту панель действий, это фоновое изображение становится четким. Поэтому я просто добавляю &nbsp; в качестве замены для текста, если мне не нужен текст в моей панели действий.

Извините за мой плохой английский: D

Ответ 3

Вместо user-scalable = no измените его на user-scalable = 0

Ответ 4

попробуйте следующее:

img {
  transform: scale(1) rotate(0) translate3d(0,0,0);
}

Ответ 5

<div style="position:fixed;"><img/></div>
<div style="position:fixed;"></div><!--add it-->

добавьте "фиксированный" элемент, следуя за "фиксированным", точно так же, как вверх.