CODEWITHSUNDEEP
csssafari
user5372593
user5372593

Reputation:

Background Position Transition Not Working in Safari

I'm changing the background position of an element on hover, it is working fine on chrome but when I try it on safari the background jumps up and down rapidly, I've tried applying a few fixes I've found from a google search and it's still not working, here is the code (the html, the original rules, the transition property, and the :hover rules) - 

<div class="port-big">
  <a class="port-item campbell" href="http://www.campbellmgmt.com/" target="_blank">
    <div class="port-img"></div>
    <h3 class="port-title">Campbell Property Management</h3>
    <img class="port-logo" src="images/campbell-logo-white.png" />
    <p class="port-descr">Campbell Property Management was my largest project while I was at Juvo Web. The client was looking to completely update their website and
    add some new features. After extensive research on property and real estate UI/UX I designed the new front end and implemented it on their website.</p>
  </a>
</div>

.port-img {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center top;
  background-position-x: 0%;
  background-position-y: 0%;
}

.campbell .port-img {
  background-image: url(../../images/campbell-screenshot.png);
  background-color: #dd3a00;
}

.port-title, .port-descr, .port-logo, .port-img {
  -webkit-transition: all ease-in-out 0.4s,
                      background-position linear 24s;
  transition: all ease-in-out 0.4s,
              background-position linear 24s;
}

.port-big .port-item:hover .port-img {
  background-position: center bottom;
  background-position-x: 0%;
  background-position-y: 100%;
}

Upvotes: 1

Views: 817

Answers (1)

user5372593
user5372593

Reputation:

I found the answer, When I separated the background-position transition into it's own rule it worked fine, ended up looking like this - 

.port-img {
  -webkit-transition: background-position linear 24s;
  -moz-transition: background-position linear 24s;
  -o-transition: background-position linear 24s;
  transition: background-position linear 24s;
}

Upvotes: 2

Related Questions