How can I get my CSS transition to work on an iPad (iOS)?

Question

Carlton grover doreen

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/question.php

Line Number: 191

Backtrace:

File: /var/www/html/cnasolution/application/views/question.php
Line: 191
Function: _error_handler

File: /var/www/html/cnasolution/application/controllers/Questions.php
Line: 419
Function: view

File: /var/www/html/cnasolution/index.php
Line: 315
Function: require_once

Asked: Dec 22,2019 In: web

Answer 1

Some CSS animations are not implemented in every browser. When they are, sometimes they behave differently across different browser engines because they are not in the W3C standards.

If your website is written with pure HTML/CSS/JS (i.e. with no frameworks like Vue, React, etc.) You have to handle this incompatibility yourself.

You have to add vendor prefixes to certain lines of CSS to make it work on Safari.

.example { /* On Chrome and Firefox */     transition: all .5s; /* On Safari */     -webkit-transition: all .5s; }

My suggestion is that you copy and paste all of your CSS code into an online auto-prefixer which adds these vendor prefixes in for you.

see demo

How can I get my CSS transition to work on an iPad (iOS)?

A PHP Error was encountered