Slide navigation doesn't function properly on iPhones

HTML & CSS
1

I’m creating a website for one of my school’s clubs (the school uses terribly outdated computers that, on rare occasions, DO have the luxury of IE9), and I can’t seem to get the expanding circle navbar to work properly on an iPhone (haven’t test android yet). Before the animation was choppy, so I replaced the:

transform: translate( 0, 50%);

with

transform: translate3d(0, 50%, 0);

in order smooth out the animation, but now when viewed on an iPhone (and only an iPhone), the large yellow circle appears where it would if the “transform: translate3d” portion did not exist. Weirdly, the hit box (if you will) remains in the correct place. What did I do wrong?

@keyframes largeball {
  0%{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    /* top: 50%; */
    top: 40px;
    left: 15px;
    transform: translate( 0, -50%);  /*I uncommented this out of desperation*/
    -webkit-transform: translate3d(0, -50%, 0); /*This is the problem code right here*/
            transform: translate3d(0, -50%, 0);
  }
  100%{
    top: 235px;
    left: -185px;
    width: 450px;
    height: 450px;
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
}

@keyframes smallball {
  0%{
    top: 235px;
    left: -185px;
    width: 450px;
    height: 450px;
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }

  100%{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    /* top: 50%; */
    top: 40px;
    left: 15px;
    transform: translate( 0, -50%);
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
    }
}

Here is the codepen (lines 214-257 in the CSS are the problem lines posted above):

Here is the link to be viewed on an iPhone:
https://miguelcmaramara.github.io/sachemefc.github.io/

Don’t mind the seemingly messy JS, I’m working on trying to make it simpler.
Thanks for all of the help!

2

Hi,

Its not working on Safari either and it seems to be that the 3d transform requires a percent unit for the last axis. I would also remove the webkit prefix as that should be in its own @-webkit-keyframe block anyway and not mixed in with the normal ones.

To avoid confusion I would also remove the normal transfroms or if you need them for a certain old browser put them in their own prefixed keyframe.

Removing the code makes this work in Safari (and should do the same for the iphone).

2 Likes
3

Thank you so much! It’s working exactly as it should now, you’re amazing!

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.