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

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 中占位符属性的已知问题，但我发现没有人遇到这个奇怪的问题。我怀疑它是将占位符与其他东西结合使用来触发此错误。

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

Answer 1

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

如果我在 header.site 元素上禁用 -webkit-transform hack，就不会再出现呈现问题。

禁用的 CSS:

截图:

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

备选方案:

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