在iPhone上颤抖的文字

Question

这是一个奇怪的错误，出现在iPhone（4S）上，而不是iPad（3）或任何桌面浏览器。 当我从这个网站加载任何页面时，请说：

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

在我的iPhone上，面包屑（“Home»JustMeans»什么是Eco Fashion？”）的文字似乎是精神分裂症。 它可以快速改变尺寸，来回，大约每秒三次，从正确的尺寸到大一点的尺寸。 有时文章文本也是不稳定的，有时从第二段开始。 有时页脚版权文本也不稳定。

我尝试删除：

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

从页脚开始，起初它似乎工作，但随后一些刷新后问题又回来了。 当我从自定义样式表中删除font-size声明时也是如此。 我在我的iPhone上禁用了Javascript，问题仍然存在。

奇怪的是，我每次在iPhone上加载页面时都不会这样做，但大部分时间都是如此。 通常，如果我在代码中更改某些内容，它将在下次刷新时停止，但稍后会返回一些刷新。 有时如果我加载页面并等待一段时间，什么都不做，精神分裂症就会停止。 有时文章文字会停止摇晃，但面包屑会继续晃动。 刷新页面几乎总是把它带回来。 并且在页面加载完成后它肯定会继续。 现在它已经持续了十分钟。 屏幕锁定，改变方向，再次关闭和打开Safari后，它会继续摆动。

在我10年的网页设计中，我从来没有见过这样的东西。 是什么导致这个和/或如何解决它？ 谢谢！

Answer 1

我以前从未经历过这样的问题。 但是，这里有两个解决方案。

解决方案＃1

将以下内容添加到css应该可以防止字体调整大小。

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

由于它似乎只是iPhone上的问题，因此仅使用媒体查询定位该终端是有意义的：

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

您可以将其添加到#breadcrumb, .post-meta和其他具有相同调整大小问题的选择器，而不是将其应用于html 。

解决方案＃2

该问题似乎也与以下规则集有关：

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;
}

将其改为：

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

也将解决问题。

在您的情况下，我会选择解决方案＃2，因为解决方案＃1会缩小目标元素的文本大小。