• 0

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/question.php

Line Number: 191


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

I have a button on my web-page that transitions the page from one section of the page to another section of the same page (ex. To jump from my bio to my projects). On both my web browser (Chrome) and Android device browser (Chrome), when I press the button it has an animation that smoothly scrolls the page. However, when I try the button on my iPad device (Chrome and Safari), the animation is not there, and the page just instantly jumps to the other section.

How can I adjust my code such that the animation works when I access the page from my iPad? Here's some relevant code below:

.fa-chevron-down:hover, .fa-chevron-down:hover, .fa-chevron-down:focus, .fa-chevron-down:active, .fa-chevron-down:visited, .fa-chevron-down:link {      text-decoration: none;  }

Download script demo [LINK]
Download script demo [LINK 2] Download script demo [LINK 2]

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
  • 411
Reply Report