iPhone上的颤抖文字

Question

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

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

在我的 iPhone 上，面包屑（“Home » JustMeans » 什么是生态时尚？”）文字看起来很精神分裂。它以大约每秒 3 次的速度来回快速改变大小，从正确的大小变为大几个点的大小。有时文章文本也很不稳定，有时从第二段开始。有时页脚版权文本也不稳定。

我尝试删除：

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

从页脚开始，起初它似乎可以工作，但后来刷新了几次，问题又回来了。当我从自定义样式表中删除字体大小声明时，情况相同。我在 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 会缩小目标元素的文本大小。