Блог

На веб-сайте отображаются фотографии разных фруктов, и если вы нажмете на кнопку, их названия появятся под изображением. В Chrome имена отображаются в правильном месте (margin-bottom: -350px), но в Safari они отображаются на самом изображении, в середине фрукта. Я попытался добавить -webkit- prefix, но безрезультатно. Пожалуйста, дайте мне знать, что мне нужно сделать, чтобы оно отображалось правильно в Safari, или если есть лучший способ закодировать это. Спасибо за вашу помощь.

 img {
  width: 200px;
  height: auto;
}

ul {
  list-style-type: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


li {
  display: inline;
}

ul li {
    width: 210px;
height: 400px;    
}


.fruitbag {
cursor: pointer;    
}

.fruitbag,
.fruitname {
  display: none;
}

.fruitname {
    position: absolute;
  margin-bottom: -350px;
-webkit-margin-bottom: -350px;
}

.fruitcontainer {
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px
}

.fruit{
    cursor: pointer;
}

}       
<ul>
  <li class="fruitcontainer">
    <img class="fruit" src="applep.png" />
    <img style="width: 300px" class="fruitbag" src="apple.gif" />
    <p class="fruitname">apple   pear</p>
  </li>
    
    <li class="fruitcontainer">
    <img class="fruit" src="avocado.png" />
    <img class="fruitbag" src="avocado.png" />
    <p class="fruitname">avocado</p>
  </li>
    
    <li class="fruitcontainer">
    <img class="fruit" src="berries.png" />
    <img style="width: 220px" class="fruitbag" src="berrybin.gif" />
    <p class="fruitname">berries</p>
  </li>

 <script type="text/jscript">
   var IsClickInProgrress =  false;

$(document).ready(function () {
  $(".fruitcontainer").click(function () {
    if(!IsClickInProgrress){
    ToggleIsClickInProgrress()
 
    let fruit = $(this).find(".fruit");
    let fruitbag = $(this).find(".fruitbag");

    if (fruit.is(":visible")) {
      fruit.fadeToggle(200, function () {
        fruitbag.each(function () {
          $(this).fadeToggle(200);          
        },ToggleIsClickInProgrress());
      });
    } else {
      fruitbag.fadeToggle(200, function () {
        fruit.fadeToggle(200, "swing", ToggleIsClickInProgrress());
      });
    }
    }
  });

  function ToggleIsClickInProgrress()
  {
    IsClickInProgrress = !IsClickInProgrress
  }
  
  $("#showNames").click(function () {
    $(".fruitname").fadeToggle();
  });
  
  $("#legend").click(function () {
    $(".hide").fadeToggle();
  });
  
  
  
});
    
    
        </script>