Trembling text on iPhone

Question

Here's a strange bug that appears on the iPhone (4S) but not the iPad (3) or any desktop browser. When I load any page from this site, say:

http://www.courtniv.com/what-is-eco-fashion/

on my iPhone, the breadcrumbs ("Home » JustMeans » What is Eco Fashion?") text seems schizophrenic. It rapidly changes sizes, back and forth, about three times a second, from the correct size to a size a few points larger. Sometimes the article text is shaky too, and sometimes from just the second paragraph onward. Sometimes the footer copyright text is unsteady as well.

I tried removing:

<?php get_template_part('includes/scripts'); ?>

from the footer, and at first it appeared to work, but then a few refreshes later the problem had returned. Same story when I removed the font-size declaration from my custom stylesheet. I disabled Javascript on my iPhone and the problem still remained.

Strangely, it doesn't do this every single time I load the page on my iPhone, but most times it does. Often if I change something in the code, it will stop on the next refresh, but then return a few refreshes later. Sometimes if I load the page and wait awhile, doing nothing, the schizophrenia will stop. Sometimes the article text will stop shaking, but the breadcrumbs will continue to shake. Refreshing the page almost always brings it right back. And it definitely continues after the page has finished loading. Right now it's been going for ten minutes. It's continued to wobble after the screen locks, changing orientation, and closing and opening Safari again.

In my 10 years of web designing, I've never seen anything like this. Any clue what's causing this and/or how to fix it? Thanks!

Answer 1

I've never experienced that kind of issue before. However, here you have two solutions.

Solution #1

Adding the following to the css should prevent the font from resizing.

html {
  -webkit-text-size-adjust:none;
}

Since it seems to only be an issue on iPhone it would make sense to target only that terminal with media queries:

@media only screen and (max-device-width: 960px) { 
  html { 
    -webkit-text-size-adjust:none; 
  }
}

Instead of applying this to html you could add it to #breadcrumb, .post-meta and other selectors that has the same resizing issue.

Solution #2

The issue also seems to be related to the following ruleset:

a,
.textwidget a img,
div.category a,
.sociable ul li {
  -webkit-transition: all .3s ease;
  -khtml-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

changing that into:

@media only screen and (max-device-width: 960px) { 
  a,
  .textwidget a img,
  div.category a,
  .sociable ul li {
    -webkit-transition: none;
    transition: none;
  }
}

will also solve the issue.

In your case I would have chosen solution #2, since solution #1 shrinks the text size of the targeted elements.