Why is my code not displaying properly on Mobile?

Question

Update: I figured out the issue, working just fine now (no idea why it worked at all before).

I created a Canadian flag animation for Canada day (July 1st). However, on the SoloLearn app it does not display as intended.
The Canadian flag is a red rectangle on each side and a Maple leaf on a white square in the center. On desktop it displays as intended, but on the app there's only a red rectangle (no white square).
Here's a link https://code.sololearn.com/W0GP69FS8F8j

Answer 1

not display?

Answer 2

It works on code playground

Answer 3

yeah

Answer 4

Did you check on the app?

Answer 5

Have you tried with vendor rules (at example -webkit-)? Try to add -webkit- vendor rule on front of animation like rules and keyframe:
Example:

@-webkit-MyAnim{....}

p{
animation: MyAnim;
animationd-delay: 1s;
-webkit-animation: MyAnim;
-webkit-animationd-delay: 1s;
}

Answer 6

The animation works just fine, it's missing the center white square.