Text positioning appearing correctly in Chrome but not in Safari

The website displays photos of different fruits and if you click on a button their names appear underneath the image. In Chrome, the names appear in the correct location (margin-bottom: -350px) but in Safari, they appear on the image itself, in the middle of the fruit. I tried adding the -webkit- prefix but to no avail. Please let me know what I need to do to make it appear correctly in Safari or if there's a better way to code this. Thank you for your help.

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>