Фоновые изображения не видны на преобразованных элементах в Firefox - PullRequest
Новая
       15

Фоновые изображения не видны на преобразованных элементах в Firefox

0 голосов
/ 20 марта 2019

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

Мы создали эту карту (https://www.kaeskoppenstad.nl/programma) с CSS3. Это преобразованное изображение с расположенными на нем маркерными элементами, которые анимируются в зависимости от положения указателя мыши.

Пример кода: 

<div id="map-wrapper">
 <div style="-webkit-perspective: 1500; -moz-perspective: 1500px;">
  <div id="map" style="transform-style: preserve-3d; transform: matrix3d(0.993895, 0.0432902, -0.10148, 0, 0.0432908, 0.693016, 0.719621, 0, 0.102, -0.723306, 0.690428, 0, 0, 0, 0, 1);">
   <div id="hotspots">

      <!-- marker 1 -->
      <a href="programma#de-kleyne-kaesmarkt" id="hotspot" class="hotspot act" style="top: 38%; left:17%;">
        <div class="table info" style="transform: scale(0.924, 1);">                                                
          <div class="table-cell icon">
            <div class="map-icon acts white"></div>
          </div>
          <div class="table-cell text">
            <div class="title">De kleyne Kaesmarkt</div>
            <div class="location">Waagplein</div>
         </div>                                              
       </div>   
     </a>

     <!-- marker 2 -->
     <a href="programma#carrousel" id="hotspot" class="hotspot goeddoel" style="top: 31%; left:19%;">
       <div class="table info" style="transform: scale(0.938, 1);">                                                
         <div class="table-cell icon">
           <div class="map-icon goededoelen white"></div>
         </div>
         <div class="table-cell text">
           <div class="title">Carrousel: de paertjes van alckmaer</div>
           <div class="location">Waagplein</div>
         </div>                                              
       </div>   
     </a>

   <!-- in the live version al lot of more markers are added obviously -->
   </div>

   <!-- map itself -->
   <img id="map-bg" src="assets/site/styles/images/map.png">
  </div>
 </div>
</div>

CSS применен (добавлены только те, которые, я думаю, имеют значение): 

#hotspots .hotspot {
  text-decoration: none;
  display: block;
  cursor: pointer;
  position: absolute;
  height: 58px;
  width: 34px;
  z-index: 100;
  background: url(images/pin.png) 0 0/cover;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-90deg) translateZ(40px);
  transform: rotateX(-90deg) translateZ(40px);
  transition: opacity .3s ease-out;
  -webkit-transition: opacity .3s ease-out;
}

.info {
  position: absolute;
  bottom: 68px;
  margin-left: -67px;
  opacity: 0;
  transition: all .3s cubic-bezier(0.7,0,.3,1);
  -webkit-transition: all .3s cubic-bezier(0.7,0,.3,1);
  visibility: hidden;
}

Все прекрасно работает в большинстве браузеров, кроме Firefox. Карта отображается и анимируется правильно, но маркеры и элементы наложения не отображаются. Похоже, маркеры как-то скрыты за картой, но все, что мы пробовали с помощью z-index или реорганизации HTML, не сработало.

Есть здесь кто-нибудь, кто может пролить свет на это?

Если понадобится дополнительная информация, просто дайте мне знать. Будьте счастливы предоставить это и решить это.

...