Question

我在Chrome的最新版本（在Firefox上正常运行）上获得了一个边界半径错误，该错误会持续使用来自HTML页面 div 的不透明度的动画时间[< STRONG>湾html ]插入另一个HTML页面[ a。 html ]与对象。

我尝试了其他解决方案（jQuery，Web Components ...）而没有得到我想要的东西，我真诚地希望继续使用 object 来完成这个特定项目，即使它是一项老化的技术。

Screenshot

a.html

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <object id="b" data="b.html"></object>
</body>
</html>

b.html

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>Hi, how are you?</div>
</body>
</html>

的style.css

* { margin: 0; padding: 0; }

body { background: blue; }

#b {
    width: 400px;
    height: 400px;
    border: 10px solid black;
    border-radius: 40px;
    overflow: hidden;
}

div {
    height: 400px;
    background: white;
    text-align: center;
    animation: ani 2s forwards;
}

@keyframes ani {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

感谢您的帮助！

Answer 1

就像例子一样，这里是我发现的jQuery版本[ a.html ]

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $("#b").load("b.html");
        });
    </script>
</head>
<body>
    <div id="b"></div>
</body>
</html>

Chrome中的Border-Radius Bug在具有不透明关键帧的对象上

1 个答案: