Disturbing text on iPhone

Question

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

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

on my iPhone, breadcrumbs ("JustMeans Home" What is Eco Fashion? ") the text seems schizophrenic. It quickly resizes, back and forth, about three times per second, from the right size to a size a few dots larger. Sometimes the text of the article also trembles, and sometimes from the second paragraph. Sometimes the footer text is also unstable.

I tried to remove:

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

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

Strange, he doesn’t do this every time I load a page on my iPhone, but most often it happens. Often, if I change something in the code, it will stop at the next update, but then will return a few updates later. Sometimes, if I load a page and wait a while without doing anything, schizophrenia will stop. Sometimes the text of an article ceases to tremble, but breadcrumbs will continue to tremble. Updating a page almost always brings it back. And it definitely continues after the page has finished loading. About ten minutes right now. It continued to swing after locking the screen, changing orientation and closing and opening Safari again.

In 10 years of web designing, I have never seen anything like it. Any clue what causes this and / or how to fix it? Thanks!

Answer 1

I have never experienced such an experience before. However, here you have two solutions.

Decision No. 1

Adding the following to css should prevent font resizing.

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

Since this seems like a problem on the iPhone, it makes sense to orient only this terminal on media queries:

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

Instead of applying this to html , you can add it to #breadcrumb, .post-meta and other selectors that have the same resizing problem.

Decision number 2

The problem is also related to the following set of rules:

 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 this to:

 @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 problem.

In your case, I would choose solution # 2, since solution # 1 reduces the text size of the target elements.