【问题标题】:backface-visibility behaviour differs between Chrome and SafariChrome 和 Safari 的背面可见性行为不同
【发布时间】:2012-03-26 09:34:25
【问题描述】:

我有一个列表,当用户按下按钮作为一种分页时,我希望列表项翻转以显示新内容。在 Chrome 中,这按预期工作,但在 Safari 中,它显示原始 li 的背面颠倒,直到我将其删除。

我在 http://jsfiddle.net/D2vgk/ 上放了一个小例子(目前仅适用于 webkit)

【问题讨论】:

    标签: css webkit transform


    【解决方案1】:

    溢出:隐藏;卡上的属性导致 Safari 出现问题。我删除了它,现在行为与 Chrome 相同。

    我在jsfiddle上放了最新版本:http://jsfiddle.net/D2vgk/10/

    【讨论】:

    • 这在 Safari 和 iOS 4.3 中对我有用。但是,它似乎无法解决 iOS 5.0+ 中的问题。
    • 在 5.0.1 版本的 iPhone 4S 上,一切似乎都按预期工作。你看到了什么行为?
    • 我构建的略有不同,你可以在这里看到它:jsfiddle.net/uGzyj/19 本质上,“后退”图像在 Chrome 和桌面 Safari 上正确显示,但 iOS 5.0+(在我的 3GS 和在模拟器上)不显示背面图像。相反,它显示“正面”图像的背面。
    • 我已经更新了你的例子。 Safari 的 iOS 似乎明确希望您也为子元素设置“transform-style:preserve-3d”属性。 jsfiddle.net/rKY6r
    • 这个帖子非常有帮助,应该作为一个成功/专业使用这个网站的例子,让人们解决问题、工程和分享。很棒的东西。非常感谢 - 这让我省去了很多麻烦。
    猜你喜欢
    • 2017-08-02
    • 2012-11-20
    • 2022-12-03
    • 2012-05-30
    • 1970-01-01
    • 2015-10-11
    • 2014-10-10
    • 2013-12-21
    • 2014-03-20
    相关资源
    最近更新 更多