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

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  style="">
  <div  id="people-container">   
    <div id="parent" >

         <!-- Lead Scientists -->
         <div >
          <div >
            <a style='color:none'href="holly-gibbs.html"><img  src="bio_img/holly_gibbs_bio_new.png" alt="Card image cap" width="200">
            </a>
          </div>
          <div >
            <a style='color:none'href="holly-gibbs.html">
            <h4 > <b>Holly Gibbs</b> </h4>
            <p >PROFESSOR AND DIRECTOR OF GLUE LAB</p>
            </a>
          </div>
        </div>
        <div >
          <div >
            <a style='color:none'href="tyler-lark.html"><img  src="bio_img/tyler_lark_bio.png" alt="Card image cap" width="200">
            </a>
          </div>
          <div >
            <a style='color:none'href="tyler-lark.html">
            <h4 > <b>Tyler Lark</b> </h4>
            <p >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.

CodePudding user response：

I think you need to clear your cache cos I can't notice it here

CodePudding user response：

Tried on a OnePlus with both Chrome and Mozilla, it seems exactly like on desktop. CSS has a habit of bugging out, try to clear cache line Nasiru stated or try a different browser just for testing

CodePudding user response：

Your issue is not recreating itself when ported over to my local drive but I see potential issues in your CSS code: you have two identical classes ".img-holder", combine these two classes; you are missing many semi-colons on your closing statements, scattered throughout your code, see below the example line "margin:0 auto" has no ";" ; also you may consider adding "!important" to your "border-radius: 50%;".

Your code issues:

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

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

}

My code suggestions:

/*  Bio container */
.img-holder {
  max-width: 200px;
  max-height: 200px;
  overflow: hidden !important;
  margin:0 auto;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  border-radius: 50% !important;
}