1

I'm studying https://github.com/bradtraversy/50projects50days By Brad and Florin on Udemy.

At "Expanding Cards" project(live demo), the mentioned code in the video doesn't perform the cards transition smoothly. Then I found Chad has fixed the issue. People share the updated code everywhere, but I'd like to know how different they works exactly as I could not find the good information about it (i.e. Why "all" is required in this case, not just "flex"?). I'll appreciate if you explain, or share the links to the helpful information.

Removed code

transition: flex 0.7s ease-in;

Added code

-webkit-transition: all 700ms ease-in;
Nao
  • 11
  • 3
  • 1
    Is this relevant? https://stackoverflow.com/questions/70183413/flex-transition-in-safari – A Haworth Sep 13 '22 at 13:03
  • Thanks for the hint! I also referred these, and understood "flex" doesn't work at Safari browsers [(1)](https://developer.apple.com/forums/thread/131664), "all" isn't required, rather it shall be avoided [(2)](https://stackoverflow.com/questions/21767037/css-transitions-not-working-in-safari). – Nao Sep 15 '22 at 08:39

1 Answers1

0

I figured out the answer to my question.

  • "flex" doesn't work at Safari browsers (1)
  • "all" isn't required, rather it shall be avoided (2).
Nao
  • 11
  • 3