Дрожащий текст на iPhone

вот странная ошибка, которая появляется на iPhone (4S), но не на iPad (3) или любом настольном браузере. Когда я загружаю любую страницу с этого сайта, сказать:

http://www.courtniv.com/what-is-eco-fashion/

на моем iPhone хлебные крошки ("Home" JustMeans " что такое эко-мода?") текст, похоже, шизофреник. Он быстро меняет размеры, назад и вперед, примерно три раза в секунду, от правильного размера до размера на несколько пунктов больше. Иногда текст статьи тоже шатко, и иногда только со второго абзаца. Иногда и нижний колонтитул колеблется.

Я попытался удалить:

<?php get_template_part('includes/scripts'); ?>

из нижнего колонтитула, и сначала казалось, что это работает, но затем несколько обновлений позже проблема вернулась. Та же история, когда я удалил объявление размера шрифта из своей пользовательской таблицы стилей. Я отключил Javascript на своем iPhone, и проблема все еще оставалась.

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

за мои 10 лет веб-дизайна я никогда не видел ничего подобного. Любая подсказка, что вызывает это и / или как это исправить? Спасибо!

6
css iphone text wordpress

1 ответов

Я никогда не испытывал такого рода проблемы раньше. Однако здесь у вас есть два решения.

Решение № 1

добавление следующего в css должно предотвратить изменение размера шрифта.

html {
  -webkit-text-size-adjust:none;
}

поскольку это, кажется, только проблема на iPhone, имеет смысл нацеливать только этот терминал с медиа-запросами:

@media only screen and (max-device-width: 960px) { 
  html { 
    -webkit-text-size-adjust:none; 
  }
}

вместо применения этого к html вы можете добавить его в #breadcrumb, .post-meta и другие селекторы с одинаковым изменением размера вопрос.

решение № 2

проблема также, по-видимому, связана со следующим набором правил:

a,
.textwidget a img,
div.category a,
.sociable ul li {
  -webkit-transition: all .3s ease;
  -khtml-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

меняем на:

@media only screen and (max-device-width: 960px) { 
  a,
  .textwidget a img,
  div.category a,
  .sociable ul li {
    -webkit-transition: none;
    transition: none;
  }
}

также решит проблему.

в вашем случае я бы выбрал решение №2, так как решение № 1 уменьшает размер текста целевых элементов.

2