Transitions not working on iOS safari - tried all the different suffix

Question

I've read multiple threads around this and I'm sure I'm missing something blindingly obvious, but I just can't see it. The below works fine on other browsers (Google, Brave etc), but no transition/transforms work on iOS. What am I missing??

 .flexitem {
  display:flex;
  flex-direction:column;
  -webkit-transition: -webkit-transform 0.20s ease 0s;
  transition: transform 0.20s ease;
    width:100%;
    background-color: white;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,25%);
    margin:2rem;
    height:70rem;
}

.flexitem:active {
  /* transform: scale(.98);
  transition: transform 0.20s ease; */
  -webkit-transform: scale(.95);
  -o-transform: scale(.95);
  -ms-transform: scale(.95);
  transform: scale(.95);
  box-shadow: 0 10px 40px rgba(0,0,0,25%);
}

Does this answer your question? [IOS Safari transition transform not working](https://stackoverflow.com/questions/30128587/ios-safari-transition-transform-not-working) — MaxiGui, May 05 '21 at 19:16
Nope, that's exactly what I've done and it's still not working — Hazzamataza, May 09 '21 at 21:01

score 2 · Accepted Answer · answered May 05 '21 at 19:10

2

The transition setting needs to be applied to the default state of the element, not the "to-be-transitioned" state (in your case obviously :active).

answered May 05 '21 at 19:10

Johannes

64,305
18
73
130

That's true - however, it still isn't working. -webkit- doesn't appear to ever work on iOS and I'm not sure why... – Hazzamataza May 09 '21 at 21:02
You should change the order: First the prefixed settings, then the general ones, i.e. `transition` *after* `-webkit-transition` – Johannes May 09 '21 at 21:06
I've edited above - still not showing any transitions or transform. Am I just being oblivious to something obvious? – Hazzamataza May 09 '21 at 21:14
You only posted CSS code (no HTML), so it's impossible to check your particular code... – Johannes May 09 '21 at 21:18

score 0 · Answer 2 · answered May 05 '21 at 20:46

.flex-container {
    /* The green effect is your code with corrections */
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction
       and if we allow the items to wrap
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    flex-flow: row wrap;

    /* Then we define how is distributed the remaining space */
    justify-content: space-around;

    padding: 0;
    margin: 0;
    list-style: none;

}

.flex-item {
    background: #0000ff;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;
    line-height: 150px;
    color: #ff0000;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

.flex-item:active {
    /* transform: scale(.98);
    transition: transform 0.20s ease; */
    transform: scale(.95);
    transition: transform 0.20s ease;
    -webkit-transform: scale(.95);
    -webkit-transition: -webkit-transform 0.20s ease 0s;
    -o-transform: scale(.95);
    -o-transition:transform 0.20s ease 0s;
    -ms-transform: scale(.95);
    box-shadow: 0 10px 40px rgba(100,200,0,25);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles/cssPracticeatMDN.css">
</head>
<body>
      <h1>Developer Network MDN</h1>

      <ul class="flex-container">
          <li class="flex-item">1</li>
          <li class="flex-item">2</li>
          <li class="flex-item">3</li>
          <li class="flex-item">4</li>
          <li class="flex-item">5</li>
          <li class="flex-item">6</li>
      </ul>
</body>
</html>

When you run the code: press the flex-items to see the desired effect. I used green instead of the original black. — user3795940, May 05 '21 at 20:51

Transitions not working on iOS safari - tried all the different suffix

2 Answers2

Linked