I’m posting this because I’ve been researching this issue for more than two days and haven’t been able to find a recent clear answer – only what seems to be a hack.
Here is the issue – which, to make things worse, I haven’t been able to reproduce with js fiddle nor codepen.
I have a grid design with three rows and more than 20 columns.
I want to show the content of only one column at a time, and for that I use a simple js script that adds/removes classes controlling the opacity property of the elements in the grid based on user interactions.
To make things smooth, I apply a transition on this opacity property.
It worked perfectly on my PC (chrome/firefox), as well as on an old Android phone (chrome/firefox).
But it was broken on my iphone (safari/chrome/firefox): the elements that should have had “opacity: 0” remained visible on screen.
The appearance/disappearance of elements would only work fine on all platforms if I removed the transitions. But I really wanted some sort of fade in/fade out…
Not being a professional, I have very limited testing means – so I almost got mad trying to figure out what was happening with transitions on that damned phone.
In the end, I got my hands on a desktop Mac and was able at last to inspect my web page in safari: to my great surprise, there was no issue flagged and the elements, still perfectly visible in their column, did have the “opacity: 0” in the inspector.
After hours of browsing stackoverflow and other forums – I couldn’t find any relevant post on that issue. The closest answers were about hovering and animations and 3Dpreserve, and most were a decade old, inviting to use –webkit prefix.
One, however, suggested to use “backface-visibility: hidden;” – but with no more explanation.
As a last resort, I decided to apply that solution to my case and – ta da ! It fixed the problem, and now my elements fade in / out nicely in my grid on iOS.
But I can’t help asking myself: wtf?
Why would backface-visibility change anything in a code that does no flips and just changes a div opacity?
Does anybody know about that issue? Or why would iOS behave like that with transition?
My problem is fixed, but I’d really love to understand why…..
Thx!
