2

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

Ни на одном устройстве больше эта проблема не воспроизводится (десктоп, планшет Эппл, телефоны на Андроиде).

В чем может быть причина? Как с этим справиться?

Привожу код, но он самый обычный:

HTML

<div>
<a href="tel:+7644664">+7 (64) 46-64</a>
<br>
<a href="tel:+7644664">+7 (64) 46-64</a>
<br>
<a href="tel:+7644664">+7 (64) 46-64</a>
<br>
<a href="tel:+7644664">+7 (64) 46-64</a>
</div>

CSS

div {
  font-size: 1.1em;
  line-height: 1.5;
  }
div a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px dashed #000;
  -webkit-transition: all .4s ease;
          transition: all .4s ease;
  }
div a:hover {
  color: #25c019;
  border-bottom: 1px dashed #25c019;
  }
1
  • вместо border можно попробовать использовать box-shadow, или абсолютный псевдо элемент, который будет проявляться при наведении.
    – NeedH8
    17 янв 2018 в 21:43

1 ответ 1

1

Решение наконец-то было найдено. Проблема оказалось в банальном - невнимательность.

Может кому-то мой ответ будет полезен, когда будете сталкиваться с "необъяснимым" поведением элементов на сайте.

В приведенном коде я упустила два важных момента (когда писала, не обратила внимание на их важность) - наличие медиазапроса и присутствие на странице второго блока с ссылками. Классы у блоков разные, но одинаковый id, к которому обращались в медизапросах, увеличивая размер шрифта.

Я не поняла почему только Айфон так чутко реагировал на этот сомнительный ход, в любом случае мне это помогло все-таки найти косяк и исправить, убрав font-size, прописанный к id и более верно прописать размер шрифтов у разных блоков на мобильном.

Надеюсь, что мой ход мыслей поможет еще кому-нибудь :)

2
  • 1
    Не правильно ставить одинаковые ID html элементам. Одинаковыми могут быть только классы, для того и нужны, ID все должны быть уникальными. Такие уж правила. Вообще гугл хром, например, будет ругаться в консоли на идентичные ID найденные на одной странице. Валидаторы, конечно, тоже не пропустят такие html документы.
    – ivan rusin
    6 окт 2018 в 22:47
  • а может ли быть одинаковый ID у элементов на странице, которые вызывают, например, одно и тоже всплывающее окно с одинаковым содержимым?
    – Alla
    8 окт 2018 в 7:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.