0

I am trying to animate a div that changes size and location at the same time. I achieved it through the transition property in chrome but it does not in safari. It seems in safari that the transform: translate(50%, 50%); property does not evaluate the width and height properties as they are both transitioning. I'm running my code on JsFiddle. My html is simply a span <span class="square" id="square"> </span>

My CSS:

.square {
    background-color: red;
    transition: all 1s;
    cursor: pointer;
    position: absolute;
    width: 10rem;
    height: 10rem;
    transform: translate(0, 0);
}

.square-expanded {
    width: 20rem;
    height: 20rem;
    transform: translate(50%, 50%);
}

My javaScript:

var square = document.getElementById("square");
square.addEventListener("click", moveSquare);

function moveSquare() {
    square.classList.toggle('square-expanded');
}

I've tried using the -webkit prefix for Safari but it has made no difference. The animation is still broken. I also tried using proper CSS animation instead of transitions but nothing.

Thanks for reading.

raul8437
  • 1
  • 1
    Check this out and see if it helps: https://stackoverflow.com/questions/29864790/why-on-safari-the-transform-translate-doesnt-work-correctly – Jeremy Harris Mar 30 '23 at 18:24
  • I already tried using the prefixes. The transform itself works, it just doesn't update its relative value during the transition. – raul8437 Mar 30 '23 at 20:43

1 Answers1

0

Kindly check the following solution:

const square = document.querySelector(".square");
square.addEventListener("click", moveSquare);

function moveSquare() {
  square.classList.toggle("square-expanded");
}
.square {
  background-color: red;
  transition: all 1s;
  cursor: pointer;
  position: absolute;
  width: 10rem;
  height: 10rem;
  transform: translate(0, 0);
}

.square-expanded {
  width: 20rem;
  height: 20rem;
  transform: translate(50%, 50%);
}
<span class="square"></span>

Basically you were not using the class across all your code. Also it is better if you don't use the id in this situation to avoid any eventual specificity problem.

underflow
  • 1,545
  • 1
  • 5
  • 19
  • Same problem. Works fine on Chrome, breaks on Safari. – raul8437 Mar 31 '23 at 12:42
  • Is there any error that you could share with us? Can you take please any relevant screenshot of your console or the Inspect Tab in the DevTools or any other additional tab? – underflow Mar 31 '23 at 14:31
  • No, there isn't any error. You can try running the code snippet above on safari vs on chrome and you'll see what I mean. The "solution" I've found was simply to not use transition, transform, and width/height at the same time. – raul8437 Apr 03 '23 at 13:19