iphone上没有出现按钮中的文字

Posted 2023-02-21

【中文标题】iphone上没有出现按钮中的文字

【英文标题】：Text in buttons not appearing at iphones

【发布时间】：2021-02-23 20:51:37

【问题描述】：

当您在 iPhone 上单击“播放”时，我在第一个屏幕后的答案按钮中出现文本时遇到了一些问题。例如。它适用于任何地方，但不适用于 iPhone。这是演示版本 - https://xahtc.github.io/test-app，在这里你可以找到我的 react 项目 - https://github.com/xahtc/test-app。有谁知道是什么问题？

【问题讨论】：

@ShamarYarde 能否给我一个屏幕，因为我检查了很多设备，自适应没有问题

对删除的评论感到抱歉。我不知道如何在 Stack Overflow 上提供屏幕截图。我能想到的唯一位置是答案部分，但这仅用于答案。虽然使用三星互联网浏览器，但它可以在 android 上运行。

@ShamarYarde 是的，它也适用于 Macbook，经过测试，但在 iPhone 上它不起作用）

【参考方案1】：

问题似乎是至少在 Safari ios 上（我在 iPad IOS 14 上进行了测试）Game_answer__2Ffxs 上的伪元素呈现在答案框中的文本前面，尽管 z-index：-1。

我不愿谈论 z-index 和堆叠上下文和转换以及所有这些东西，因为我过去弄错了，但这个问题的重要一点是，在 IOS 上，文本被覆盖并且否定z-index 没有达到预期的效果。

立即尝试将background-color: #fff 设置为半透明（我使用background-color: rgba(255,0,0,0.5)），这样您就可以自己查看这些伪元素覆盖的内容。

您会看到文本在那里，而且您还会看到毫无疑问这些伪元素旨在覆盖的中心线。我猜必须有另一种方法来摆脱它 - 或者为了用户看到答案的利益而暂时放弃它并用透明替换#fff。