如何克服移动 Safari 中奇怪的 "placeholder" 问题

Question

我在我的网站上遇到了一个非常奇怪的错误，这个错误只出现在移动版 Safari 中（在 iPhone5、iOS8.1 上测试过）。下面是几个实时页面的链接，每个页面都有一个搜索输入控件：

奇怪的行为是，当使用移动版 Safari 时，在键入 2 或 3 个字符后，父元素的背景以及输入控件本身消失了。剩下的就是光标本身。

这是第一个示例的输入控件的标记：

<input type="text" name="q" id="q" autocomplete="off" placeholder="- search the jungle -" value="" class="searchfield" />

我一直在剥离该输入框的属性、更改名称等，直到我弄清楚是什么触发了它。原来是占位符属性。当我删除它时，问题就消失了。

我一直在网上寻找移动版 Safari 中占位符属性的已知问题，但我没有发现任何人遇到这个奇怪的问题。我怀疑它是将占位符与其他东西结合使用来触发此错误。

当然，一个简单的解决方案是完全删除占位符文本，但我发现该解决方案目前过于暴力，我真的很好奇这个错误是什么。

Answer 1

我不能说与 placeholder 属性的关系可能是什么，用 Safari 检查器删除它似乎对我没有太大影响，但我能够找到一个可能的解决方案。

如果我禁用 header.site 元素上的 -webkit-transform hack，渲染问题将不再发生。

截图：

在最新的 iOS 版本中使用这些 GPU 加速 hack 似乎存在一些问题。

我想一个好的黑客值得另一个。似乎这个渲染问题也可以通过将 -webkit-transform: translate(0); 添加到 input 树中的一个元素，甚至是 input 元素本身来解决。