PSA: iOS 15 mobile CSS transitions are broken

In case you thought you were going mad and over-scrutinising your transition styling recently...

Just a quick note to save your sanity if, like me, you were trying to debug why some of your CSS transition animations are no longer working with the latest version of iOS (v15).

After debugging a broken left: -100%; to left: 0%; mobile menu transition: left ease .3s; animation for a good hour; I was wondering if I was going completely mad or had just forgotten everything I know about basic styling.

I can confirm that the latest version of iOS (v15) has broken some basic CSS transitions.

I have only found so far that transitioning position values of top, right, bottom, left are affected.

A support ticket has been raised with Apple here: https://developer.apple.com/forums/thread/691655

Let’s hope they fix soon!

What other people say

Other peoples’ opinions matter. I have worked with many people over the years and think it is important to share their experience of working with me.

  • React Development

    Tried and tested React application development. From super-fast single page applications to efficient large-scale corporate websites.

  • High-quality Templating

    Experienced approach to coding consistent and maintainable frontend templates and component libraries.

  • Accessibility Implementation

    Deep understanding of website accessibility, accessibility consultation, practical design, development, and testing experience.