Web 组件，载入 HTML 源代码字符串，如果设置 CSS 的 border-radius，会导致整个 Web 组件变纯黑色 HarmonyOS 鸿蒙Next

Web 组件，载入 HTML 源代码字符串，如果设置 CSS 的 border-radius，会导致整个 Web 组件变纯黑色 HarmonyOS 鸿蒙Next

this.webController.loadData(`
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <base href="${apiOrigin}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img {
            max-width: 100% !important;
            height: auto !important;
        }

        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <div style="padding: 15%;">
        ${this.contents.get(this.currentBookPage)?.content}
    </div>
</body>

</html>
`, 'text/html', 'utf-8')

长按 Web 组件，会有图片的拖拽效果，能暂时看见图片：

去掉 border-radius 后：

所以这是为什么？


更多关于Web 组件，载入 HTML 源代码字符串，如果设置 CSS 的 border-radius，会导致整个 Web 组件变纯黑色 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于Web 组件，载入 HTML 源代码字符串，如果设置 CSS 的 border-radius，会导致整个 Web 组件变纯黑色 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next系统中，Web组件载入HTML源代码字符串时，如果设置了CSS的border-radius属性，可能会导致整个Web组件变为纯黑色。这是由于鸿蒙Next的Web组件在处理某些CSS属性时，渲染引擎可能存在兼容性问题。具体来说，border-radius属性在某些情况下可能触发了渲染异常，导致组件无法正确显示内容，从而呈现为纯黑色。

这个问题可能与鸿蒙Next的WebView内核版本或CSS渲染机制有关。建议检查使用的WebView内核版本，并确保HTML和CSS代码的兼容性。如果问题持续存在，可以考虑使用其他方式实现圆角效果，或者等待鸿蒙Next的后续版本修复此问题。

回到顶部