Несколько дней назад я обнаружил, что ссылки в нижнем колонтитуле могут перестать отвечать на запросы в Chrome на Android (на iOS такого не происходит).После нескольких часов тестирования мне удалось создать пример, в котором можно воспроизвести эту проблему.
Код
Код очень прост: документ состоит из длинного случайного текста ( Lorem Ipsum ) и две кнопки нижнего колонтитула.
- левая кнопка помещается в нижний колонтитул
<div> и позиционируется отрицательным знаком bottom: -50px. - правая кнопка имеет фиксированное положение (снизу: 5 пикселей).
Проблема касается обеих кнопок.
Чтобы увидеть полный пример, разверните следующую строкуфрагмент:
var absCount = 0;
var fixedCount = 0;
$('#footer-button-abs').click(function() {
$('#footer-button-abs').html("Abs Clicked " + (++absCount) + "x");
});
$('#footer-button-fixed').click(function() {
$('#footer-button-fixed').html("Fixed Clicked " + (++fixedCount) + "x");
});
body {
margin: 0;
}
.footer {
display: block;
position: fixed;
bottom: 0;
left: 0;
}
/* button placed within footer */
#footer-button-abs {
position: absolute;
top: -50px;
left: 5px;
}
/* button with fixed positioning */
#footer-button-fixed {
position: fixed;
bottom: 5px;
right: 5px;
}
/* making things pretty */
#footer-button-abs,
#footer-button-fixed {
background: cyan;
cursor: pointer;
padding: 5px;
font-size: 1em;
line-height: 1.8;
text-align: center;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1,
p,
em,
ol {
margin: 1rem;
}
h1 {
font-size: 2em;
}
em {
color: red;
font-size: 1.2em;
display: block;
margin-bottom: 0;
margin-right: 0;
}
ol {
background: yellow;
border: 1px solid black;
}
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident officiis vel consequuntur laudantium dignissimos fugiat dicta, eum voluptate eligendi non, quam omnis ipsam delectus pariatur molestias maxime animi. Atque, earum?</p>
<p>Facilis cumque a pariatur repellat tempore odio optio quis iste neque libero ex et, quasi ipsam magni vero quae necessitatibus facere veritatis molestias quam consequatur, possimus deleniti! Esse, necessitatibus totam.</p>
<p>Temporibus asperiores assumenda maxime architecto ducimus natus reprehenderit, beatae accusamus iusto ipsam pariatur dolorem perspiciatis, fugiat at quas quibusdam consequatur. Neque adipisci aspernatur expedita qui id et, non laborum earum!</p>
<p>Aperiam possimus sint optio non harum doloribus nesciunt id enim ipsum repellendus repudiandae sed minus omnis deserunt sit mollitia ipsam vel eos aut, earum perspiciatis nostrum. Distinctio fugiat corporis vero.</p>
<p>Dignissimos provident sapiente perspiciatis, nisi repellat minima esse possimus! Officia at, iure dolor, veniam ut, error delectus aspernatur assumenda eos cum nemo. Sapiente atque voluptatem, rerum est amet vel accusantium.</p>
<p>Quaerat nihil optio sunt illo reiciendis obcaecati harum dolorem doloribus? Quasi ducimus maiores voluptate, quae ipsum harum repellendus consectetur dolor sit repellat hic quibusdam inventore facilis voluptas cupiditate dolores quaerat!</p>
<p>Dolores voluptas odio aperiam vero consectetur quae eius, deserunt rem quisquam, nihil veniam impedit inventore provident. Officiis consequuntur voluptatem vitae, non expedita itaque culpa possimus eveniet, qui placeat reprehenderit fugiat.</p>
<p>Id laboriosam tenetur necessitatibus eveniet architecto, dicta modi voluptate, adipisci autem minus quam sunt explicabo iure magni corrupti, neque ad est excepturi aliquid optio nulla illo dolores iusto nihil. Veniam.</p>
<p>Cumque hic quas quae voluptatum amet quis est temporibus eius, aliquid nisi porro facilis ab! Inventore, beatae asperiores molestias, fuga magni mollitia dignissimos necessitatibus distinctio maiores exercitationem nihil animi blanditiis!</p>
<p>In totam sunt esse quasi facilis corrupti dolorem nisi recusandae qui exercitationem, voluptate incidunt laborum labore dolor sint itaque accusamus id cumque atque ut illo voluptas beatae pariatur soluta! Ipsam.</p>
<p>Commodi sunt dolorum laudantium incidunt provident totam tenetur sequi, molestiae doloribus enim quia nisi iusto atque nihil. Eaque voluptates nihil, repudiandae omnis praesentium, harum expedita, ab nemo animi reiciendis reprehenderit.</p>
<p>Veritatis modi illum delectus, eum recusandae ab obcaecati distinctio suscipit nostrum? Voluptatem incidunt aut, reiciendis sunt tempore quisquam fugiat iste harum quaerat nostrum, alias ratione explicabo delectus assumenda sapiente cumque.</p>
<p>Asperiores dolore dolores perferendis amet molestiae repudiandae incidunt enim, architecto minima natus officiis eaque illo error exercitationem vitae ut quaerat blanditiis, accusantium corrupti consequuntur inventore. At, temporibus! Provident, harum
quas?</p>
<p>Beatae, quas aut? Asperiores, provident? Soluta odit voluptatum harum molestiae, iste officiis earum quod tenetur placeat dicta ad labore vel quisquam sint eius tempore cum ipsum repellendus aperiam? Vero, iste!</p>
<p>Recusandae maiores possimus, tempore id doloribus similique magnam officiis ex et aspernatur inventore animi vel laboriosam cum quisquam ut tenetur dolorem nam. Assumenda temporibus id, necessitatibus pariatur ad voluptatum perferendis?</p>
<p>Commodi rem hic assumenda impedit, praesentium molestias aliquid voluptate, perferendis aspernatur, necessitatibus asperiores debitis placeat quibusdam. Tenetur debitis qui neque! Dignissimos ut dolorum possimus quibusdam quam qui aut. Iure, enim?</p>
<p>Exercitationem nostrum ea similique odio ullam impedit repellat consectetur cum ab id fugit, et cupiditate dolor provident! Perspiciatis distinctio, laboriosam dolorem animi odit consequuntur rerum aspernatur! Ducimus dolor est molestiae!</p>
<p>Dolorum cum repellat magni nostrum alias natus suscipit, nulla quia magnam odit earum at laborum quisquam labore in voluptas. Officia iure sapiente asperiores provident pariatur quae ratione corporis a unde.</p>
<p>Explicabo, impedit! Voluptatem, nulla. Minima natus sit autem molestiae doloribus, dolorem maiores harum eaque tenetur corporis, qui nam sequi adipisci, eveniet accusamus quo quasi magnam iure et voluptatem possimus culpa!</p>
<p>Ullam, tenetur eum minus magni veniam saepe fuga aliquam accusantium perferendis maxime rem error ea odit voluptatum voluptate vitae natus reprehenderit necessitatibus facilis. Vitae velit asperiores placeat architecto numquam iste?</p>
<p>Quaerat temporibus fuga maxime ea aperiam! Nihil ab eum nulla ea assumenda optio, natus qui ipsum impedit ipsam obcaecati odit beatae recusandae illo, pariatur sunt quas unde facere dicta eius.</p>
<p>Libero nam laborum reprehenderit dignissimos adipisci, enim facilis, officia consequuntur ea magni quo ab consequatur aperiam culpa fuga alias cum doloribus! Dolores quasi voluptate nam unde autem perspiciatis, soluta nulla!</p>
<p>Expedita iste quia odio illo, quas numquam in, doloremque rerum officiis optio ipsa quos at alias blanditiis debitis tenetur enim ipsam dolores amet quo quasi suscipit porro similique? Quam, odio!</p>
<p>Exercitationem repudiandae fugiat quod dolore nihil suscipit ipsam et, dolores quis dicta pariatur sit quia cumque ab consectetur illum labore nam molestiae, facilis magni itaque laboriosam perspiciatis. Repudiandae, quas sunt.</p>
<p>Quod, quasi excepturi ab recusandae dicta exercitationem reiciendis nobis optio? Voluptates perferendis placeat necessitatibus odit delectus repellendus voluptate nulla ab dolorum beatae quis architecto pariatur, mollitia dolorem explicabo exercitationem
eaque.</p>
<p>Deserunt modi incidunt architecto distinctio. Et at provident, debitis voluptas reprehenderit quod dolores, fugiat dolore quas laboriosam id cum iure sit, odit necessitatibus distinctio recusandae molestias iste. Porro, praesentium magnam.</p>
<p>Ipsa exercitationem cum omnis sunt voluptas libero neque sed commodi voluptatibus sit dicta tempora maxime, eveniet hic adipisci, qui similique architecto facere doloribus numquam blanditiis fugiat. Iusto sint aliquid quisquam.</p>
<p>Aut quibusdam nisi doloribus tempore distinctio maiores adipisci magnam eum ex esse facere enim ipsa rerum, provident ipsam velit, voluptates voluptas! Omnis accusantium, iusto expedita eos vel magni nemo voluptatem?</p>
<!-- FOOTER BUTTONS - here's where the action hapens -->
<div class="footer">
<button id="footer-button-abs">Abs Clicked 0x</button>
</div>
<button id="footer-button-fixed">Fixed Clicked 0x</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Вы можете играть и попытаться исправить код на CodePen .
Воспроизведение проблемы
Вот как воспроизвести проблему (точно следуйте процедуре).Чтобы помочь с тестированием, к примеру можно получить доступ к вашему телефону в виде raw gist .
- загрузить пример в Chrome на Android: нажмите здесь
- попробуйте нажать любую из кнопок нижнего колонтитула - метка изменится
- прокрутить до самого нижнего края страницы
- , снова попробуйте нажать любой из нижнего колонтитулакнопки - метка кнопки НЕ изменится
- немного прокрутится вверх, пока адресная строка не станет видимой
- , снова попробуйте нажать любую из кнопок нижнего колонтитула - метка изменится
Альтернативная процедура
Существует также альтернативная процедура, которая дает тот же результат:
- загрузить пример в Chrome наAndroid: нажмите здесь
- прокрутите до самого нижнего края страницы
- прокрутите немного вверх, пока адресная строка не станет видимой
- прокрутите внизбит, пока адресная строка не будет скрыта
- попробуйте нажать любую издругие кнопки - метка кнопки НЕ изменится
- прокрутите немного вверх, пока адресная строка снова не станет видимой
- снова попробуйте нажать любую из кнопок нижнего колонтитула - метка изменится
Анализ
После некоторой удаленной отладки я заметил, что область, которая получает сенсорные события, отсоединяется от элемента, которому она принадлежит (кнопка HTML /ссылка), как показано на следующем изображении:
- область щелчка / касания (цель события)
- изображение кнопки
Кнопка будет реагировать, если вы нажмете часть экрана, где расположена целевая область события (на рисунке показана стрелкой 2).
Заключение
Я думаю, это вызвано изменением размера области просмотра.Когда адресная строка скрыта, область просмотра расширяется, что, в свою очередь, меняет местоположение нижнего колонтитула (в координатах области просмотра).Однако положение целевой области нажатия / касания не корректируется соответствующим образом.
Для меня это выглядит как ошибка Chrome (то есть на iOS и в Firefox такого не происходит).
Обходной путь
Единственный надежный обходной путь, который я обнаружил, - это предотвращение скрытия Chrome адресной строки , что, в свою очередь, предотвратит изменение размера области просмотра.
Это можно реализовать, как описанов следующей статье StackOverflow: Запретить скрытие адресной строки в мобильных браузерах .Я протестировал решение в следующем CodePen , и оно отлично работает.
Единственным недостатком является то, что экран страницы real estate немного меньше, так какадресная строка остается видимой всегда.
Дополнительная информация
Эта идентичная проблема обсуждается на следующих страницах переполнения стека:
Также естьсообщение об ошибке, опубликованное на веб-сайте Chromium: Смещение адресной строки браузера в поле фиксированного элемента