So I recently finished The Dunbar Official Website and the site is live! Check it out! But before it was officially launched, I did encounter one problem, a week before the project deadline, that I was not expecting.
I had been developing in Chrome, but I didn’t actually test any of it in Safari. I figured all of the styling and animations were compatible cross-browser because I had followed all of the CSS protocols to accommodate different browsers. If you are not familiar with these protocols, here is an example from my stylesheet:
Press enter or click to view image in full size
-webkit-animation makes sure your animation is compatible with Safari, iOS, Google Chrome and Android.
-moz-animation makes sure your animation is compatible with Mozilla FireFox.
-o-animation makes sure your animation is compatible with Opera.
-ms-animation makes sure your animation is compatible with IE.
animation is the CSS standard implementation.
And here is what the animations keyframes would look like:
