iphone - iPhone 上的文字颤抖

Question

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

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

在我的 iPhone 上，面包屑(“Home » JustMeans » What is Eco Fashion?”)文本看起来很精神 split 。它以大约每秒 3 次的速度来回快速地改变尺寸，从正确的尺寸到大几个点的尺寸。有时文章文本也不稳定，有时从第二段开始。有时页脚版权文本也不稳定。

我尝试删除:

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

从页脚，起初它似乎工作，但后来刷新几次后问题又回来了。当我从我的自定义样式表中删除字体大小声明时，情况相同。我在我的 iPhone 上禁用了 Javascript，但问题仍然存在。

奇怪的是，并不是每次我在 iPhone 上加载页面时它都这样做，但大多数时候它会这样做。通常，如果我更改代码中的某些内容，它会在下一次刷新时停止，但稍后会返回几次刷新。有时，如果我加载页面并等待一段时间，什么都不做，精神 split 症就会停止。有时文章文字会停止抖动，但面包屑会继续抖动。刷新页面几乎总能立即返回。页面加载完成后它肯定会继续。现在它已经持续了十分钟。在屏幕锁定、更改方向以及再次关闭和打开 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 缩小了目标元素的文本大小。