weird behavior on click/hover/focus on safari only - circle pictures changes to square?

Issue

I'm having odd behavior where circular pictures are changing to square on desktop and mobile. This only seems to be happening on safari, and it only happens when I add a css transition. Here's the website:

https://shmoss.github.io/Gibbs-Lab/people.html

If you view on mobile and click on a photo, it will change to a square. Here's the code:

<div class="py-5 text-center text-info background-info" style="">
  <div class="container" id="people-container">   
    <div id="parent" class="row">

         <!-- Lead Scientists -->
         <div class="col-6 col-md-3 p-4 holly-gibbs lead-scientist">
          <div class="img-holder">
            <a style='color:none'href="holly-gibbs.html"><img class="img-fluid d-block mx-auto" src="bio_img/holly_gibbs_bio_new.png" alt="Card image cap" width="200">
            </a>
          </div>
          <div class="bio-holder">
            <a style='color:none'href="holly-gibbs.html">
            <h4 class="people_name"> <b>Holly Gibbs</b> </h4>
            <p class="mb-0">PROFESSOR AND DIRECTOR OF GLUE LAB</p>
            </a>
          </div>
        </div>
        <div class="col-6 col-md-3 p-4 lead-scientist">
          <div class="img-holder">
            <a style='color:none'href="tyler-lark.html"><img class="img-fluid d-block mx-auto " src="bio_img/tyler_lark_bio.png" alt="Card image cap" width="200">
            </a>
          </div>
          <div class="bio-holder">
            <a style='color:none'href="tyler-lark.html">
            <h4 class="people_name"> <b>Tyler Lark</b> </h4>
            <p class="mb-0">LEAD SCIENTIST</p>
            </a>
          </div>
        </div>
    </div>
  </div>

/* ------------------------------People Page ------------------------------*/

/*  container for people photos */
#people-container {
    padding-top:10px;
  }

/*  Bio photo */
.img-holder {
  max-width: 200px;
  max-height: 200px;
  overflow: hidden !important;
  margin:0 auto
}

/*  Bio info container (name, title) */
.bio-holder {
  padding-top:10px;
}


/*  Bio title */
.mb-0 {
  color:#004869 !important;
  font-size:14px;
  font-weight:500 !important;
  text-transform: uppercase
}

/*  Bio image container */
.img-holder {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
   border-radius:50%

} 


/*  Scaling bio image on hover */
/*  THIS CAUSES THE ISSUE! */
.img-fluid.d-block.mx-auto:hover {
  -webkit-transform: scale(1.1);
  -webkit-transition: all 0.125s ease-in-out 0s;
  -moz-transition: all 0.125s ease-in-out 0s;
  -ms-transition: all 0.125s ease-in-out 0s;
  -o-transition: all 0.125s ease-in-out 0s;
  transition: all 0.125s ease-in-out 0s;
}

.img-fluid.d-block.mb-3.mx-auto:focus {
  -webkit-transform: scale(1.1);
  -webkit-transition: all 0.125s ease-in-out 0s;
  -moz-transition: all 0.125s ease-in-out 0s;
  -ms-transition: all 0.125s ease-in-out 0s;
  -o-transition: all 0.125s ease-in-out 0s;
  transition: all 0.125s ease-in-out 0s;
}

Can't seem to figure out what's going on, maybe conflicting CSS somewhere? Any help appreciated! Thanks.

Solution

I can reproduce, here is a minimal example, _{(please next time try to make yours as minimal)}

.round {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}
.inner {
  transition: all 1s;
  background: radial-gradient(red, green);
  height: 100%;
  cursor: pointer;
}
.inner:hover {
  transform: scale(2);
}

<div class=round >
  <div class=inner ></div>
</div>

This is a Safari bug, your code is fine [should work], and you should report the issue at https://bugs.webkit.org/.

The problem seems to affect only the software rendering, if we force using the GPU rendering, e.g by applying a 0px translateZ on the container, it works as expected:

.round {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  transform: translateZ(0px); /* force GPU rendering */
}
.inner {
  transition: all 1s;
  background: radial-gradient(red, green);
  height: 100%;
  cursor: pointer;
}
.inner:hover {
  transform: scale(2);
}

<div class=round >
  <div class=inner ></div>
</div>

So in your code you'd add this on the .img-holder rule.
However note that you probably don't need the prefixes for these properties anymore, and that even if you do need them, you should always add the unprefixed ones too, at the end. Currently your code only has -webkit-transform set, not the unprefixed one. This particular case works, but on some property you'll get different behaviors when the prefixed version is being chosen over the unprefixed one.

Answered By - Kaiido