Ссылки и кнопки менее отзывчивы на странице с iframe YouTube с помощью iPhone Safari - PullRequest
Новая
       25

Ссылки и кнопки менее отзывчивы на странице с iframe YouTube с помощью iPhone Safari

0 голосов
/ 29 мая 2018

У меня есть веб-страница RoR, которая использует iframe YouTube, который полностью нормально работает с браузером на настольном компьютере, но по какой-то причине при использовании Safari на iPhone другие кнопки и ссылки на странице не очень отзывчивы и могут занимать несколько "кликов""с большим пальцем, чтобы зарегистрироваться.По большей части страница по-прежнему работает нормально, но я надеюсь обеспечить оптимальное взаимодействие с мобильными пользователями.Есть ли что-то с iframes или ссылками на YouTube, которые мешают тому, как «нажимаемые» другие кнопки / ссылки на той же странице для iPhone?Я не буду делиться полным исходным кодом моей страницы для краткости, но вот фрагмент кода iframe и родительских элементов DIV. 

    <div class="m-auto m-width-800">
      <div class="embed-responsive embed-responsive-16by9 workout-video">
        <iframe class="workout-iframe embed-responsive-item" src="https://youtube...blah" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>

Опять же, все по-прежнему работает, мне просто интереснопочему может быть трудно нажать на другие ссылки и кнопки на странице в iPhone Safari?Единственные страницы во всем моем веб-приложении, которые странно ведут себя на iPhone, - это страницы с элементами iframe YouTube, так что я думаю, что причина в этом ... какие-то мысли?

1 Ответ

0 голосов
/ 18 июля 2018

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

У меня есть веб-сайт с некоторым содержанием, несколькими ссылками, а затем частично вниз по странице есть встроенная форма Google.в фрейме.

На мобильном телефоне (я только тестировал iPhone) я обнаружил, что для первоначального нажатия на ссылки требуется только «мягкое» касание.Однако после нажатия на iframe и прокрутки назад к ссылкам эти ссылки требуют более жесткого нажатия.

(Сначала я подумал, что с пальцами что-то не так!)

Мне удалось решить эту проблему, добавив на страницу следующий код JavaScript: 

<script>(function(d){
  // fix "hard" link clicks caused by iphone fixation on iframe
  d.getElementsByTagName("BODY")[0].ontouchstart = function() {
        d.getElementsByTagName("BODY")[0].focus()
      }
}(document))</script>

Это возвращает фокус на <body> всякий раз, когда вы касаетесь <body>.Это работает, но хорошо ли это исправить?Есть ли лучшее решение?

https://iframe -iphone-focus.glitch.me / демонстрирует проблему и исправление.

...