warm-regards

I'm not sure if I have the complete answer, but I actually know what the issue is. 🙂 I took a look at your site, and the keywords you should google are: webkit, media queries, and card flipping in css. Here is a link to the best guide to css: https://css-tricks.com/almanac/properties/b/backface-visibility/ You actually have two issues: 1. regardless of viewport size (size of the browser window) - iOs mobile behaves differently, and your code needs to declare webkit variables with slightly different language to make Safari do stuff correctly. 2. Viewport size. Your site also did not show your card flips correctly when I shrank my browser to half the size of my laptop screen. This is where media queries come in. There are breakpoints that tell the browser how to show your images, depending on what size the window is. I'm adding a link to my git repo for a different (non-Squarespace) site, so you can check out the exact html and css I used. https://github.com/readingshapes/fearflashcards Start with the index.html file, as it has css at the top. Hopefully you can compare your code to it and see where any differences might be useful. I haven't solved it perfectly myself yet, which is why I didn't say I had a solution, but I can definitely help you a little bit? The next thing I'm going to personally try, in order to get Safari to allow flipping is to re-incorporate javascript. Good luck to you, hope this helps.