2014-07-22 2 views
0

У меня есть несколько простых див и видео в качестве фона:Div не отображается над видео

    <div class="swiper-slide"> 
         <video width="1024" height="704" id="vid" loop> 
          <source src="images/reverse.mp4" type="video/mp4"> 
         </video> 
         <div id="overlay"> 
          <img src="images/man.png" id="man-photo"/> 
         </div> 
        </div> 


     #vid { 
      width: 100%; 
      height: 100%; 
     } 
     #overlay { 
      position: absolute; 
      display:block; 
      width: 100%; 
      height: 100%; 
      left: 0; 
      top: 0; 
      z-index: 1000; 
     } 
     #man-photo { 
      position: absolute; 
      top: 200px; 
      left: 300px; 
      z-index: 1200; 
      display: block; 
     } 

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

Любая идея, как преодолеть это?

+0

Создайте JSfiddle, я уверен, что этот код не отражает то, что вы говорите. – Ruddy

+0

http://jsfiddle.net/gjHVK/ в скрипке он работает правильно. Я не могу опубликовать код приложения, поэтому у меня просто нет подсказки – mjanisz1

+0

Мы не можем исправить код, если код, который вы предоставляете, работает. Вы должны включить весь относительный код для просмотра, воссоздать проблему, а затем обновить свой вопрос. До тех пор мы не можем помочь. – Ruddy

ответ

0

По-видимому, у хром возникают проблемы с перерисовкой изображений по видео.

Но:

setInterval(function(){$('#man-photo').hide().show(0)},100); 

зафиксировал его. Не самое изысканное решение, но оно работает.

Смежные вопросы