时间戳

首页 > 解决方案 > Safari 无法正确转换详细信息/摘要元素

html - Safari 无法正确转换详细信息/摘要元素

问题描述

我一直在尝试一些不同的格式来使用细节/摘要，并且我一直在尝试让翻转卡起作用。我已经在 Chrome 中完成了大部分工作，仅使用 CSS（没有 JS），唯一的问题是当卡片翻转回前面时，文本会稍微提前消失，这对我来说很有意义，因为元素会立即关闭点击。

没有意义的是 Safari 似乎拒绝在 details 元素中运行转换某些元素。我在下面包含了一个片段。它适用于其他浏览器，我创建了一个具有相同结构和样式但仅使用 div 的版本，这也适用。我可以使用 CSS 动画在将卡片翻转到背面时使其工作，但是当将卡片翻转到前面（即删除动画样式）时，它只是捕捉到其初始位置而没有过渡，因此这并不是真正的解决方法。此外，当我使用检查器并调整应该转换的元素时，它工作正常——但是当打开/关闭详细信息元素时，它仍然只是捕捉。

有什么方法可以解决任何人都知道的这个问题吗？谢谢你的帮助！

        body {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fefefe;
            perspective: 1000px;
            margin: 0;
            font-size: 1.25rem;
            line-height: 1.875rem;
        }

        html * {
            box-sizing: border-box;
        }

        details {
            width: 300px;
            height: 400px;
            transform-style: preserve-3d;
            position: relative;
            cursor: pointer;
        }

        .front,
        .back,
        summary:before {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            padding: 1rem;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            /* transform-style: preserve-3d; */
            transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
            -webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
        }

        .front,
        summary:before {
            background: white;
            border-radius: 9px;
            border: 3px solid orange;
            box-shadow: 0 0 32px -8px rgba(0, 0, 0, 0.33);
        }

        summary {
            list-style: none;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            transform-style: preserve-3d;
        }

        summary:before {
            border-color: blue;
            content: '';
            box-sizing: border-box;
            background: none;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
            -webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
        }

        .front {
            background-color: orange;
            color: white;
        }

        summary::-webkit-details-marker,
        summary::marker {
            display: none;
        }

        .back {
            overflow-y: scroll;
            pointer-events: none;
            transform: rotateY(180deg);
            /* transform-style: preserve-3d; */
        }

        .back p {
            margin: 0;
        }

        details[open] .front {
            transform: rotateY(180deg);
        }

        details[open] .back {
            /* transform: rotateY(360deg);
            -webkit-transform: rotateY(360deg); */

            animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
            -webkit-animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
        }

        details[open] summary:before {
            transform: rotateY(360deg);
            -webkit-transform: rotateY(360deg);
            transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
            -webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
            /* animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
            -webkit-animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards; */

        }

        @keyframes back {
            from {
                transform: rotateY(180deg);
            }

            to {
                transform: rotateY(360deg);
            }
        }
<html> 
<body>
    <details>
        <summary>
            <div class="front">Front of Card</div>
        </summary>
        <div class="back">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur.</p>
        </div>
    </details>
</body>

</html>

标签： htmlcsscss-animationsdetails-tag

解决方案

推荐阅读