Website not rendering properly on Safari (works perfectly on chrome and firefox)

My website just went live, but is not rendering properly on Safari. Specifically the tabs that live on the bottom of my main home screen automatically expand on load, and won’t shrink after they’ve loaded. I tried adding the “-webkit-transform-origin” to my CSS, but that didn’t solve the problem. Not sure if this is happening because of my CSS or my JS, but I’ve tried the things I knew to look for. Anybody have an idea of what is happening here? Would really appreciate any help I can get!
This is a link to my website.

Javascipt:

    var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');

tileBtn.on('click touchstart', function() {
  var self = $(this);
  var match = self.attr('data-tile');
  var allContent = $('li.content__item');
  var content = $('li#' + match);

  self.toggleClass('active');

  content.toggleClass('active');

  contentWrap.css({
    'transition-delay': '.35s'
  });

  return false;
});

$(window).on('click touchstart', function(e) {
  if (allContent.hasClass('active') && tileBtn.hasClass('active') && !$(e.target).is('.content__item :input')) {
    allContent.removeClass('active');
    setTimeout(function() {
      tileBtn.removeClass('active');
    }, 400);
    contentWrap.css({
      'transition-delay': '.0s'
    });

  }
})



    *, *:before, *:after {
  box-sizing: border-box;
}

CSS:

body {
  background: url('headbackclear.png') transparent top no-repeat; 
  background-size: cover;
  position: relative;
  width: 100%;
  height:85vh;
  font-family: 'Source Sans Pro';
  overflow-x: hidden;
}


.title {
  text-align: center;
  font-family: 'Source Sans Pro';
  font-weight: 100;
  font-size: 3.75rem;
  letter-spacing: 5px;
  background: linear-gradient(rgba(255, 0, 0, 0), #444, rgba(255, 0, 0, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0;
}
@media screen and (min-width: 37.5em) {
  .title {
    font-size: 4.75rem;
  }
}

p {
  margin: 0 auto 2rem;
  text-align: center;
  font-family: 'Source Sans Pro';
  font-size: 1.25rem;
  color: #444;
  font-weight: 100;
  width: 90%;
}
@media screen and (min-width: 37.5em) {
  p {
    height: 70%;
  }
}

.case-study-gallery {
  margin-top: 50px;
  width: 90%;
  margin: 0;
  max-width: 1100px;
}

.case-study {
  position: relative;
  display: block;
  width: 90%;
  height: 250px;
  margin: 0 auto 2rem;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: all .4s ease;
}
@media screen and (min-width: 37.5em) {
  .case-study {
    height: 300px;
  }
}
@media screen and (min-width: 45em) {
  .case-study {
    display: inline-block;
    width: 45%;
    margin-left: 25px;
  }
}

.case-study__img {
  width: 90%;
  display: block;
  margin-top: 50%;
  transform: translateY(50%);
  margin: 0 auto;
}

.case-study__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
}
.case-study__overlay:after {
  content: '';
  width: 100%;
  border-radius: 10px;
  height: 100%;
  background-color: #202020;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -10;
  left: 0;
  transition: all .3s ease;
}

.case-study__title {
  position: relative;
  top: -200px;
  margin-bottom: 2rem;
  margin-top: 4rem;
  font-size: 2.25rem;
  font-family: 'Source Sans Pro';
  font-weight: 100;
  color: white;
  text-align: center;
  letter-spacing: 5px;
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
}

.case-study__link {
  position: relative;
  display: block;
  width: 60%;
  top: 200px;
  padding: 10px;
  margin: 0 auto;
  font-family: 'Source Sans Pro';
  color: white;
  letter-spacing: 3px;
  text-decoration: none;
  text-align: center;
  border: 2px solid white;
  border-radius: 3px;
  font-size: 1.25em;
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
}
.case-study__link:hover {
  background-color: white;
  color: #202020;
}

.case-study:hover .case-study__title {
  top: 0;
}
.case-study:hover .case-study__link {
  top: 0;
}
.case-study:hover .case-study__overlay:after {
  opacity: .75;
}


.study1 {
  background-image: url("TAG.png");
}

.study2 {
  background-image: url("copperImg.png");
}

.study3 {
  background-image: url("bestImg.png");
}

.study4 {
  background-image: url("uber.png");
}

.study5 {
  background-image: url("all-state-on-demand--deck 1.jpg");
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tiles {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left:0;
  display: flex;
  width: 100%;
}
.tiles__tile {
  flex: 1;
  padding: 20px;
  transition: all .25s ease-out;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.tiles__tile.active:nth-child(1) {
  background: tomato;
}
.tiles__tile.active:nth-child(2) {
  background: deepskyblue;
}
.tiles__tile.active:nth-child(3) {
  background: lightseagreen;
}
.tiles__tile.active:nth-child(4) {
  background: crimson;
}
.tiles__tile:hover:nth-child(1) {
  background: tomato;
}
.tiles__tile:hover:nth-child(2) {
  background: deepskyblue;
}
.tiles__tile:hover:nth-child(3) {
  background: lightseagreen;
}
.tiles__tile:hover:nth-child(4) {
  background: crimson;
}

.content {
  z-index: 10;
  height: auto;
  position: relative;
  top: 0;
}
.content__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: 10;
  align-items: center;
  padding: 12vw;
  transform: scale(0);
  transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.content__item.active {
  transform: scale(1);
}
.content__item.active .content-wrap {
  transform: scale(1);
  opacity: 1;
}
.content__item:nth-child(1) {
  transform-origin: 0% 100%;
  -webkit-transform-origin: 0% 100%;
  background: tomato;
}
.content__item:nth-child(2) {
  transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  background: deepskyblue;
}
.content__item:nth-child(3) {
  transform-origin: 66% 100%;
  -webkit-transform-origin: 66% 100%;
  background: lightseagreen;
}
.content__item:nth-child(4) {
  transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%
  background: crimson;
}
.content__item .content-wrap {
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.8s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------- */
.stuff {
  margin: 6vw;
  max-width: 768px;
}

h2 {
  font-weight: 300;
  color:white;
}

h3 {
  font-size: 48px;
}

p {
  font-weight: 300;
  font-size: 24px;
}


.nav__link_circle {
 display:inline-block;
  width:2rem;
  height:2rem;
  border-radius:2rem;
  line-height:2rem;
  text-shadow:0 .5rem 0 #666;
  text-align:center;
  text-decoration:none;
  box-shadow:.5rem .5rem .5rem #000;
  opacity:.95;
  z-index:0;
  margin-top:35rem;
  margin-right: 7rem;
  position:absolute;
  bottom:1rem;
  right:0;


}
.nav__link_circle1 {
 display:inline-block;
  width:2rem;
  height:2rem;
  border-radius:2rem;
  line-height:2rem;
  text-shadow:0 .5rem 0 #666;
  text-align:center;
  text-decoration:none;
  box-shadow:.5rem .5rem .5rem #000;
  opacity:.95;
  z-index:0;
  margin-top:35rem;
  margin-right: 1rem;
  position:absolute;
  bottom:1rem;
  right:0;

}
.nav__link_circle2 {
display:inline-block;
  width:2rem;
  height:2rem;
  border-radius:2rem;
  line-height:2rem;
  text-shadow:0 .5rem 0 #666;
  text-align:center;
  text-decoration:none;
  box-shadow:.5rem .5rem .5rem #000;
  opacity:.95;
  z-index:0;
  margin-top:35rem;
  margin-right: 4rem;
  position:absolute;
  bottom:1rem;
  right:0;
}
.icon__links {
  display:inline-block;
  width:2rem;
  height:2rem;
  border-radius:2rem;
  line-height:2rem;
  text-shadow:0 .5rem 0 #666;
  text-align:center;
  box-shadow:.5rem .5rem 1rem #000;
  background:#cccbbb;
  opacity:.95;
  z-index:9999;
  margin-top: 2rem;
  margin-right:5rem;
  position:relative;
  }

.btn:hover {
  background-color: #bfbfbf;
}
.btn.btn-submit {
  background-color: #4f6fad;
  border-bottom-color: #374d78;
}
.btn.btn-submit:hover {
  background-color: #5f7db6;
}

#form-main {
  margin-left:5em;
}

form {
  max-width: 100%;
  display: block;
  padding-top: 5em;
  vertical-align: center;


}
form ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
form ul li {
  margin: 0 0 0.25em 0;
  clear: both;
  display: inline-block;
  width: 25%;
}
form ul li:last-child {
  margin: 0;
}
form ul li p {
  margin: 0;
  padding: 0;
  float: left;
}
form ul li p.right {
  float: right;
}
form ul li .divider {
  margin: 0.5em 0 0.5em 0;
  border: 0;
  height: 1px;
  width: 20%;
  display: block;
  background-color: #4f6fad;
  background-image: linear-gradient(to right, #ee9cb4, #4f6fad);
}
form ul li .req {
  color: #ee9cb4;
}
form label {
  display: block;
  margin: 0 0 0.5em 0;
  color: #4f6fad;
  font-size: 1em;
}
form input {
  margin: 0 0 0.5em 0;
  border: 1px solid #ccc;
  padding: 6px 10px;
  color: #555;
  font-size: 1em;
}
form textarea {
  border: 1px solid #ccc;
  padding: 6px 10px;
  width: 25%;
  color: #555;
}
.instagram-media {
  z-index: 100;
  opacity: 0.7;
  position: fixed;
  size: cover;
}
form small {
  color: #4f6fad;
  margin: 0 0 0 0.5em;
}

@media only screen and (max-width: 480px) {
  .pull-right {
    float: none;
  }

  input {
    width: 20%;
  }

  label {
    width: 25%;
    display: inline-block;
    float: left;
    clear: both;
  }

  li, p {
    width: 30%%;
  }

  input.btn {
    margin: 1.5em 0 0.5em;
  }

  h1 {
    font-size: 2.25em;
  }

  h3 {
    font-size: 1.125em;
  }

  li small {
    display: none;
  }
}

@media screen and (max-width:480px){
  .caption h3{
    font-size: 12px;
  }
}#form-main{
  width:100%;
  float:left;
  margin-top:5em;
}

#form-div {
  background-color:rgba(72,72,72,0.4);
  padding-left:35px;
  padding-right:35px;
  padding-top:35px;
  padding-bottom:50px;
  width: 450px;
  float: left;
  left:28%;
  position: absolute;
  margin-top:30px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
  color:#3c3c3c;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
  background: #fff;
  box-shadow: 0;
  border: 3px solid #3498db;
  color: #3498db;
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
  color:#30aed6;
  border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
  background-image: url(https://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#name:focus{
  background-image: url(https://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email{
  background-image: url(https://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email:focus{
  background-image: url(https://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#comment{
  background-image: url(https://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
  background-color:white;
}

#button-blue{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  float:left;
  width: 100%;
  border: #fbfbfb solid 4px;
  cursor:pointer;
  background-color: #3498db;
  color:white;
  font-size:24px;
  padding-top:22px;
  padding-bottom:22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#button-blue:hover{
  background-color: rgba(0,0,0,0);
  color: #0493bd;
}

.submit:hover {
  color: #3498db;
}

.ease {
  width: 0px;
  height: 74px;
  background-color: #fbfbfb;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  -ms-transition: .3s ease;
  transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}

@media only screen and (max-width: 580px) {
  #form-div{
    margin-right: 3%;
    width: 100%;
    margin-left: 3%;

    padding-left: 3%;
    padding-right: 3%;

  }

.btn:hover {
  background-color: #bfbfbf;
}
.btn.btn-submit {
  background-color: #4f6fad;
  border-bottom-color: #374d78;
}
.btn.btn-submit:hover {
  background-color: #5f7db6;
}

#form-main {
  margin-left:5em;
}

form {
  max-width: 100%;
  display: block;
  padding-top: 5em;
  vertical-align: center;


}
form ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
form ul li {
  margin: 0 0 0.25em 0;
  clear: both;
  display: inline-block;
  width: 25%;
}
form ul li:last-child {
  margin: 0;
}
form ul li p {
  margin: 0;
  padding: 0;
  float: left;
}
form ul li p.right {
  float: right;
}
form ul li .divider {
  margin: 0.5em 0 0.5em 0;
  border: 0;
  height: 1px;
  width: 20%;
  display: block;
  background-color: #4f6fad;
  background-image: linear-gradient(to right, #ee9cb4, #4f6fad);
}
form ul li .req {
  color: #ee9cb4;
}
form label {
  display: block;
  margin: 0 0 0.5em 0;
  color: #4f6fad;
  font-size: 1em;
}
form input {
  margin: 0 0 0.5em 0;
  border: 1px solid #ccc;
  padding: 6px 10px;
  color: #555;
  font-size: 1em;
}
form textarea {
  border: 1px solid #ccc;
  padding: 6px 10px;
  width: 25%;
  color: #555;
}
.instagram-media {
  z-index: 100;
  opacity: 0.7;
  position: fixed;
  size: cover;
}
form small {
  color: #4f6fad;
  margin: 0 0 0 0.5em;
}

@media only screen and (max-width: 480px) {
  .pull-right {
    float: none;
  }

  input {
    width: 20%;
  }

  label {
    width: 25%;
    display: inline-block;
    float: left;
    clear: both;
  }

  li, p {
    width: 30%%;
  }

  input.btn {
    margin: 1.5em 0 0.5em;
  }

  h1 {
    font-size: 2.25em;
  }

  h3 {
    font-size: 1.125em;
  }

  li small {
    display: none;
  }
}

@media screen and (max-width:480px){
  .caption h3{
    font-size: 12px;
  }
}#form-main{
  width:100%;
  float:left;
  margin-top:5em;
}

#form-div {
  background-color:rgba(72,72,72,0.4);
  padding-left:35px;
  padding-right:35px;
  padding-top:35px;
  padding-bottom:50px;
  width: 450px;
  float: left;
  left:28%;
  position: absolute;
  margin-top:30px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
  color:#3c3c3c;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
  background: #fff;
  box-shadow: 0;
  border: 3px solid #3498db;
  color: #3498db;
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
  color:#30aed6;
  border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
  background-image: url(https://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#name:focus{
  background-image: url(https://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email{
  background-image: url(https://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email:focus{
  background-image: url(https://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#comment{
  background-image: url(https://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
  background-color:white;
}

#button-blue{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  float:left;
  width: 100%;
  border: #fbfbfb solid 4px;
  cursor:pointer;
  background-color: #3498db;
  color:white;
  font-size:24px;
  padding-top:22px;
  padding-bottom:22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#button-blue:hover{
  background-color: rgba(0,0,0,0);
  color: #0493bd;
}

.submit:hover {
  color: #3498db;
}

.ease {
  width: 0px;
  height: 74px;
  background-color: #fbfbfb;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  -ms-transition: .3s ease;
  transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}

@media only screen and (max-width: 580px) {
  #form-div{
    margin-right: 3%;
    width: 100%;
    margin-left: 3%;

    padding-left: 3%;
    padding-right: 3%;

  }

span > div {
  padding: 20px 25px;
  box-shadow: 5px 5px 9px rgba(0,0,0,.5);
}
/* sets flex box to column for mobile */
.container {
    display: flex;
    color: white;
    flex-direction: column;
    align-items: center;
    background: #333;
}
/* sets all flexboxes to be same length */
.container span {
    flex: 1;
}
/* Order # can be changed to switch order of boxes z-index is used to layer boxes. */
.column-left {
    order: 1;
    background: #F08080;
    z-index: 200;
}

.column-center {
    order: 2;
    background: #20B2AA;
    z-index: 150;
}

.column-right {
    order: 3;
    background: #DA70D6;
    z-index: 100;
}

/* the following media's are to make this look nicer on bigger screens. */
@media screen and (min-width: 600px) {

  .container {
    flex-direction: row;
  }
}

@media screen and (min-width: 1000px) {

  .container {
    font-size: 1.4em;
  }


Source: cross-browser

Leave a Reply