I still have problems on my iphone for those properties that require CSS3 prefix -webkit-

Question

I really hope that someone help me understand what the problem is ...

and especially if it's just me or all mobile devices that use safari.

Less than a week ago I realized that unexpectedly the property

align-items: center;

no longer worked exclusively on my iphone 5 (not updated to version 9.x), but it worked on other new and more iphone on mac

I opened a topic and I was advised to add the prefix webkit (I did, but I do not understand why it worked once worked without prefix and now no ..)

How is possible that "display: flex" and "align-items: center" do not work anymore on my iphone?

Now I find that the transition css3 not work ... although I have the prefix -webkit!

-webkit-transition: transform 250ms ease out 0s;


 -webkit-transform: rotate (-180);

but the absurd thing is that it works on mac easily ....

I'm wrong? or changing something on mobile safari? or my ihpne is broken?

Thanks

Answer 1

In terms of general -webkit- not working on mobile, have you tried checking to see if your CSS is divided? (For example, the desktop stylesheet has the property and not the mobile one.)

Concerning the rotation, I don't think rotation works on mobile browsers. I have no actual evidence to back this claim, other than from experience, it never works on mobile for me. It may work on another phone (Android? Windows Phone?) or browser. Safari for iOS is a different browser than Safari for Mac.

Best thing I can advise is to try the Chrome app from the App Store. That way you'll know whether or not the problem is just with Safari, or Mobile in general.

Also, you may need to list both -webkit-transition: and transition: in your CSS. Generally you always want the actual property, followed by the vendor prefixes.