【问题标题】：How to overcome weird "placeholder" issue in mobile Safari如何克服移动 Safari 中奇怪的“占位符”问题
【发布时间】：2015-02-27 21:35:38
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

截图：

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

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

【讨论】：

非常感谢亚历山大。我没有使用检查器删除占位符，而是将其从实际代码中删除，这使问题消失了。我不确定为什么用检查员将其删除不会产生相同的效果。我完全同意转换黑客是错误的，特别是从 iOS8 开始。不幸的是，我不想删除它们，因为我需要它来进行惯性滚动，这对用户体验有很大的影响。不过你的答案很好，它不能直接解决，所以我会等待其他答案，否则你会得到“接受”。
@Ferdy 我想出了一个替代解决方案，似乎可以让你保留黑客。请参阅我编辑的答案。
这实际上完全有道理！该问题包括隐藏在图层后面的输入字段，通过给它自己的图层，可以解决它。今晚会试试，让你知道！
测试了您的替代解决方案，它可以完美运行，现在也已部署到实时站点。谢谢，赏金是你的！