Page Transitions on Mac Safari

Question

Dear sirs,
I have found that page transition, if left on opacity: 0, never gets to a visible state on mac computers / phones.

body:not(.no-transition) #wrapper,
.animsition-overlay {
position: relative;
opacity: 0;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;

all good on androids and pc browsers thought.

I currently have it running on http://cherry.school with opacity 0.5 for testing purposes.

Could you please take a look at what can be done.

Thanks a lot for your time and consideration.

victor

masha_design · Answer

Dear sirs, I have found that page transition, if left on opacity: 0, never gets to a visible state on mac computers / phones. body:not(.no transition) wrapper, .animsition overlay { position: relative; opacity: 0; webkit animation fill mode: both; animation fill mode: both; all good on androids and…