iPad Safari mobile, похоже, игнорирует позицию z-индексации для элементов видео html5 - PullRequest
Новая
       40

iPad Safari mobile, похоже, игнорирует позицию z-индексации для элементов видео html5

36 голосов
/ 10 сентября 2010

У меня есть элемент видео на странице, который отлично работает как в Safari Mobile, так и на компьютере.У меня есть полупрозрачное выпадающее меню, которое работает нормально.Проблема в том, что когда меню находится над элементом видео, в настольном сафари я вижу видео под меню (по желанию), в то время как в мобильной версии элемент видео остается на переднем плане (безобразно) независимо от того, что я говорюCSSЕсть ли обходной путь?

An image of the problem

Ответы [ 11 ]

37 голосов
/ 04 февраля 2011

Проблема возникает, только если элемент видео был создан динамически.Если элемент был только на странице при загрузке, z-index работает нормально.

Вы можете исправить z-index для динамически создаваемых видео, задав элемент видео -webkit-transform-style: preserve-3d.

ДаЭто так же плохо, как haslayout на IE!

10 голосов
/ 10 сентября 2010

К сожалению, нет.

Исходя из моего опыта и понимания того, как работает iOS в настоящее время, это невозможно.

Mobile Safari на iPad вырезает отверстие для окна Quicktime, которое воспроизводит видео с использованием встроенного аппаратного ускорения для увеличения времени автономной работы. (IPhone и iPod Touch просто открывают его в отдельном окне для достижения того же эффекта.)

Это окно плохо воспроизводится с другим HTML-кодом на странице. На самом деле, я не нашел способа заставить мобильный Safari отображать что-либо поверх тега. Я предполагаю, что это потому, что аппаратное ускорение позволяет только масштабировать и позиционировать видео, и что оно способно обрабатывать только одно видео за раз.

9 голосов
/ 12 февраля 2012

Я использую flowplayer и простое выпадающее меню CSS, и у меня возникла та же проблема.

У меня есть раскрывающееся меню, которое при касании покрывает часть области видео.Подменю отображается поверх видео, как и ожидалось, но сенсорные события не отправлялись.

Я исправил это, комбинируя несколько предложений от других, отвечающих на этот вопрос: я установил видимость: скрытый при открытии меню и видимость: visible при закрытии подменю И установите -webkit-transform-style: preserve-3d свойство CSS для видео.

Вот соответствующий код.Я исключил CSS для меню, но он делает то, что вы могли ожидать - в результате появилось меню, которое охватывает части видео.

меню и видео HTML 

<div id='nav'>
  <ul>
    ... <!-- bunch of ul/li stuff here for the menu and submenus -->
  </ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>

CSS 

video {
  -webkit-transform-style: preserve-3d;
}

Javascript 

$(document).ready(function(){
  $("#nav li").hover(
    function() {
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
      $("video").css({visibility:"hidden"});
    },
    function(){ 
      $(this).find('ul:first').css({visibility: "hidden"});
      $("video").css({visibility:"visible"});
    }
  );
);
3 голосов
/ 20 сентября 2010

Мне удалось разместить div меню над тегом html5 video в мобильном сафари на ipad.Честно говоря, у меня не было никаких проблем, и это просто сработало.Может быть, потому что я использовал анимацию CSS3 и, следовательно, графический процессор?Вы можете попробовать использовать хак, чтобы добавить элемент в графический процессор.Если вы поместите -webkit-transform: translateZ(0); на элемент, это заставит его использовать графический процессор ...

1 голос
/ 24 января 2013

Вы можете исправить z-index на динамически создаваемых видео, задав элемент видео -webkit-transform-style: preserve-3d.

Это сработало для меня с динамически созданным элементом видео.Я также установил z-index наложенного div на z-index: 888;, что также могло бы помочь.

1 голос
/ 15 декабря 2011

Я столкнулся с этим также. Единственное, что я мог получить на работу, это добавить 

display:none

к тегу видео при отображении над ним элемента div, на который нужно было нажать.

1 голос
/ 25 августа 2011

-webkit-transform-style:preserve-3d и -webkit-transform:translateZ(0) у меня не сработали.

Использование Flowplayer с плагином ipad и плагином панели управления позволило мне удалить созданную панель управления ipad и заменить ее чем-то, что можно z-indexed под моими модальными окнами.

0 голосов
/ 28 августа 2015

Для тех, у кого возникли проблемы с этим, еще одно исправление, которое мне помогло, состояло в том, чтобы изменить параметры встраиваемого кода, чтобы запретить элементы управления, предлагаемые видео, а также параметры заголовка видео и плеера.Я добавил простой запрос Modernizr.MQ , чтобы изменить src для планшета и мобильного устройства, и включил в iframe src следующее:

? Rel = 0 & controls = 0 & showinfo = 0

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

0 голосов
/ 16 августа 2014

Только что столкнулся с этой проблемой сегодня и должен был собрать решение из нескольких ответов, так как ни один из них полностью не решил проблему ...

У меня есть элементы видео в свернутом списке стилей "табличное представление", которые были захваченыкасаться событий на iPhone при попытке нажать на другие элементы списка.На iPhone видео воспроизводилось при нажатии на другие свернутые элементы, которые оказались на том же месте на экране.

Чтобы исправить это, потребовалось все следующее:

1) Использование этого: 

video{
    -webkit-transform-style: preserve-3d;
  }

... не оказало никакого влияния, но я оставил егов любом случае.Теперь все работает, так что я не хочу больше с ним связываться:)

2) Переключение visibility: hidden само по себе не сработало, а display:none не сработало, как ожидалось.

3) В дополнение к «видимости» атрибут видео тега HTML5 controls также должен быть добавлен / удален динамически.Либо:

$("video").css({visibility:"hidden"}).removeAttr("controls"); или $("video").css({visibility:"visible"}).attr("controls", "controls");

4) Необходимо установить видимость / элементы управления для загрузки документа на основе исходного браузера / размера экрана

5) Хотя основная проблемаЭто было странное поведение iPhone, я также должен был учитывать изменения размера окна выше моей самой маленькой точки прерывания медиа-запроса 600px - иначе видео появилось бы / исчезло бы при неправильных размерах экрана.

$(window).resize(function(){
    if ($(window).width() > 600){
        $("video").css({visibility:"visible"}).attr("controls", "controls");
    }
});

Довольно тяжело обходить то, что по сути является глупой мобильной ошибкой Safari ... Я очень надеюсь, что это сработает на iPad, когда я протестирую его позже ...

0 голосов
/ 24 апреля 2014

Это код, который будет работать как на iPad, так и на iPhone.Я попытался удалить элементы управления, а затем добавить их снова, но это работало только на iPad, а не на iPhone.После удаления непрозрачности, а затем добавить его снова, это работало и на iPhone. 

$("#overlay_open").click(function(){
  $("video").prop("controls", false);
  $("video").css("opacity", 0);
});

$("#overlay_close").click(function(){
  $("video").prop("controls", true);
  $("video").css("opacity", 1);
});
Страница:
...