weolar / miniblink49

a lighter, faster browser kernel of blink to integrate HTML UI in your app. 一个小巧、轻量的浏览器内核,用来取代wke和libcef
Apache License 2.0
7.23k stars 1.09k forks source link

CSS.supports css var特性检测的返回异常 #570

Open qqworker opened 1 year ago

qqworker commented 1 year ago

测试html的代码如下: test.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS特性测试页面</title>
    <style>
        .container {
            width: 60%;
            margin: 10% auto 0;
            background-color: #f0f0f0;
            padding: 2% 5%;
            border-radius: 10px
        }

        ul {
            padding-left: 20px;
        }

        ul li {
            line-height: 2.3
        }
    </style>
    <script>
        function canUse(t) {
            return window.CSS && CSS.supports && (CSS.supports(t) || CSS.supports.apply(CSS, t.split(":")));
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>这个是一个测试css是否支持var/env/constant的页面</h1>
        <ul>
            <li><script>document.write('css.body.display.flex:' + (canUse('display:flex') ? '支持': '不支持'));</script></li>
            <li><script>document.write('css.var:' + (canUse('--a:0') ? '支持': '不支持'));</script></li>
            <li><script>document.write('css.env:' + (canUse('top:env(a)') ? '支持': '不支持'))</script></li>
            <li><script>document.write('css.constant:' + (canUse('top:constant(a)') ? '支持': '不支持'))</script></li>
        </ul>
    </div>
</body>
</html>

在普通的浏览器显示是 image 但是在Miniblink下显示是 image

目前造成的后果是uniapp框架的leftwindow都不能正常的显示了。 例如: https://hellouniapp.dcloud.net.cn/ http://hellouniadmin.dcloud.net.cn/admin/ 都无法正常显示。 目前只能把生成uniapp的代码中查找 this.topWindow||this.leftWindow||this.rightWindow)&&uni.canIUse("css.var")&&window.matchMedia&&( 将&&uni.canIUse("css.var")删除,不然左边栏都无法显示。 由于uniapp的受众群体很大,建议修复这个问题。