Why is my overlay not working on Safari but is working on Chrome?

Question

Image hover overlay is working on all other platforms that I have tested (desktop, android, etc.) but it doesn't seem to work on Safari at all. Not working on iPhone, iPad and Mac. I understand that :hover doesn't work with touch screen devices but I have included :active and :focus and it still isn't working on Safari.

When you hover or click on .service the title should transition up and the overlay text should appear below it. Please see below the code:

.service {
  position: relative;
  width: 80%;
  height: 200px;
  margin: 60px 10%;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition: all 0.3s;
}

.main-img-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  font-weight: 700;
  color: #f8f9fa;
  opacity: 1;
  transition: 0.5s;
}

.img-title {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2px 10px;
  font-size: 1.1em;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 1%;
  background: rgba(0, 0, 0, 0.7);
  color: #f8f9fa;
  display: flex;
  flex-direction: wrap;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  opacity: 0;
}

.service:hover .main-img-title .img-title,
.service:active .main-img-title .img-title,
.service:focus .main-img-title .img-title {
  animation-name: title-slide-up;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0);
}

.service:hover .img-overlay,
.service:active .img-overlay,
.service:focus .img-overlay {
  opacity: 1;
}

#service-event:hover .main-img-title .img-title,
#service-event:active .main-img-title .img-title,
#service-event:focus .main-img-title .img-title {
  animation-name: title-slide-up-low;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.overlay-img-description {
  font-size: 18px;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 1%;
  width: 100%;
  max-height: 200px;
}

.overlay-img-description ul {
  padding: 0;
}

.overlay-img-description li {
  display: inline-block;
  font-size: 20px;
}

.overlay-img-description li+li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: 0 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
}

.overlay-img-description p {
  margin: 10px 0 0 0;
  font-size: 0.9em;
}

@keyframes title-slide-up-low {
  from {
    transform: translateY(0)
  }
  to {
    transform: translateY(-45px)
  }
}

<div id="service-event" class="service">
  <img class="bg-img" src="Images/Steel .JPG" alt="Steel" id="steel">
  <div class="main-img-title">
    <div class="img-title" id="steel-title">STEEL</div>
  </div>
  <div class="img-overlay">
    <p class="overlay-img-description" id="steel-desc">Our steel crews are experienced with the construction of system scaffolding, black steel tower and truss structures. We specialise in supplying steel climbing teams with the support of steelhand ground labourers as well as plant operators who are
      familiar with the requirements of truss and steel assembly.</p>
  </div>
</div>

score 0 · Answer 1 · answered Apr 27 '21 at 09:35

It actually works in Safari on Mac, but not on mobile devices.

The issue is that you want to add :focus and :active styles to an element, that is not focusable by default. Moreover, you want this behaviour on mobile devices, where the interaction is a bit different. Your .service element is a div, which is not as interactive as a form control or a button, for example.

There is a way to make the div focusable by using the tabindex attribute as shown here. That case is explored in this question too.

Why is my overlay not working on Safari but is working on Chrome?

1 Answers1