reactjs - React Project : Safari seems to be rendering, 但不绘制元素?

标签 reactjs safari rendering mobile-safari

我正在渲染一个卡片列表,每个卡片显示一些数据以及三行,允许用户导航到该卡片的特定扩展部分。

出于某种原因,Safari 似乎为每张卡片渲染了三个导航行,但它们是白色且透明的。我知道它们已被渲染,因为我仍然可以单击该行所在的空间并且导航按预期工作。它只是看不见。

使用 Chrome 时不会出现此问题。它只发生在 Safari 上:无论是在浏览器中的桌面上还是在 iOS 上运行 Safari 时。控制台中没有错误。

另一个奇怪的难题是,当我在 Safari 中检查元素时,它们出现在屏幕上!这是link我拍摄的展示该行为的视频。

有什么想法吗???

最佳答案

以防万一有人偶然发现这一点,我采纳了 Jay 的建议并开始修剪 CSS。最终我意识到“更新行”同时设置了显示:“flex”和位置:“相对”。一旦我删除了position:“relative”(它一开始并没有做任何事情,但一定是错误添加的),Safari 就完美地呈现了它。

TLDR:对于 Safari,在同一个 div 上显示:“flex”和位置:“relative”会产生渲染问题。

关于reactjs - React Project : Safari seems to be rendering, 但不绘制元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64124108/

相关文章:

css - 容器问题 - React 和样式化组件

reactjs - 没有子元素的 JSX 元素必须是自关闭的

javascript - 为什么恢复后状态在 Safari 中的 Web 音频中会无效?

opengl - 使用 OpenGL 进行延迟渲染,在表面的光照边界附近经历严重的像素化

javascript - 为什么我的 Google map 中的 map 与其容器不对齐

reactjs - 未处理的 JS 异常 : Can't find variable: require

reactjs - 如何获取 Material UI Icon SVG 路径? react 图标选择器

javascript - 在 Safari 中输入一个字符后,以 jQuery 为中心的文本框失去焦点

google-chrome - 使用 Chrome 或 Safari 强制 HTTP/2

html - 多列布局中文本行的垂直韵律