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

Никто не ответил на этот подобный вопрос,

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

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

Проблема в том, что position:fixed приводит к размытию элементов дочерних элементов изображения в некоторых браузерах 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 чтобы зафиксировать верхнюю навигацию в верхней части мобильного веб-браузера, каковы мои другие варианты? Как другие мобильные сайты достигают этого результата?

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

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

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

  • Position: абсолютный размер не-фона с-viewport – нечеткий

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

Вот как читать этот график:

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

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

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

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

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

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

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

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

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

Добавить &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

Вместо пользовательского масштабируемого = не изменять его в user-scalable = 0

попробуй это:

 img { transform: scale(1) rotate(0) translate3d(0,0,0); } 
 <div style="position:fixed;"><img/></div> <div style="position:fixed;"></div><!--add it--> 

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