Question

I cannot figure out why this is. The issue does not appear on Android devices that I’ve tested, yet with an iPhone or iPod touch, clicking on the menu-bar will cause it to twitch in and out of various sizes.

http://christianselig.com

Answer 1

You have a transition set on your .menu-bar element. I suspect what’s happening is that it’s being resized by the browser, and is transitioning to the new size, rather than simply snapping.

Just replace your transition:

transition: 0.6 ease

With one that scopes the properties you want to transition:

transition: box-shadow 0.6 ease

That should fix it, but it’s difficult for me to test, as the issue happens on page load.

Edit: I was on the right track, wrong location. Scoping the transitions on the anchors does it. See http://coffeepowered.net/projects/Christian%20Selig.htm for example.

.menu-bar a {
    color: #555;
    padding: 5px 8px 7px 8px;
    text-decoration: none;
    -webkit-transition: -webkit-box-shadow 0.1s ease;
    transition: box-shadow 0.1s ease;
}