如何在移动Safari中克服奇怪的“占位符”问题

Question

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

http://www.jungledragon.com/search
http://www.jungledragon.com/tags
http://www.jungledragon.com/wildlifemap/countries

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

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

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

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

我一直在网上查找移动版Safari中已知的占位符属性问题，但我发现没有人知道这个奇怪的问题。我怀疑它正在使用占位符和其他一些东西来触发这个错误。

当然，一个简单的解决方案是完全删除占位符文本，但我发现这个解决方案现在太暴力了，而且我真的好奇这个bug是什么。

Answer 1

我无法说出与placeholder属性的关系可能是什么，使用Safari检查器将其删除似乎对我的结果没什么影响，但我能够找到一种可能的解决方案。

如果我在-webkit-transform元素上停用header.site黑客，则不再出现渲染问题。

禁用CSS：

截图：

在最新的iOS版本中使用这些GPU加速黑客似乎存在许多问题。

替代解决方案：

我认为一个好的黑客应该得到另一个好处。通过将-webkit-transform: translate(0);添加到input树中的某个元素，甚至是input元素本身，也可以解决此渲染问题。