Should this be an RFC?

• [x] This is not a substantial change

Description

非常感谢这个库的存在！ 目前正在使用webf，来运行H5，目前适配效果不是很好，很容易造成页面左右滑动，请问如何才能做好适配相关的工作呢？需要在Flutter 容器层做处理吗？

Alternatives and Workarounds

No response

What version of webf are you using

最新分支

Steps To Reproduce

运行vue2简单demo即可重现（vue3测试过没问题）

Code example:

` `

Expected results: 点击事件生效 & 有log输出

Actual results: 无点击事件响应

• [x] selector & rule parser
• [x] match rule for element
• [x] match unit test
• [x] example works fine
• [x] optimize Stylesheet append / remove
• [x] Force updates while scrolling
• [x] optimize Document query selector
• [x] animation spec
• [x] calc() spec https://github.com/openkraken/kraken/projects/7

TODO(bridge support):

1. element.style inline style text https://github.com/openkraken/kraken/issues/174
2. document.styleSheets
3. performance

• [x] Inherit style https://github.com/openwebf/webf/issues/108
• [x] Optimize QuerySelector API performance#82
• [x] Improved element matching styles
• [x] fix Variable & shorthands

Affected version

main or 0.13.0-beta.9

No same issues found.

• [X] Yes, I search all issues but not found.

Steps to Reproduce

1. run example
2. pass the number using the method channel

Code example

bundle.js

p.onclick = async function() {
  const id = await webf.methodChannel.invokeMethod("test");
  console.log(id);
}

main.dart

_javaScriptChannel.onMethodCall = (String method, arguments) async {
      if (method == 'test') {
        return await Future.value(111111111111111);
      }
};

Expected results

output 111111111111111

Actual results

output 307163591

Affected version

0.12.0 and main

No same issues found.

• [X] Yes, I search all issues but not found.

Steps to Reproduce

look code

Code example

let box = document.createElement('div');
document.body.style.background= '#f92';
document.body.style.width= '300px';
document.body.style.height= '300px';
document.body.style.display= 'flex';
document.body.style.flexDirection= 'column';
document.body.appendChild(box);

box.style.background = '#6ad0e2';
box.style.display = 'flex';
box.style.flexDirection='column';


const icon = document.createElement('div');
icon.style.zIndex = 0;
icon.style.background= '#f32';
icon.style.maxHeight = '30px';
icon.style.flexGrow = 1;
icon.style.display = 'flex';
icon.style.overflow = 'scroll';
icon.style.fexShrink = 1


box.appendChild(icon);

Expected results

Actual results

Affected version

^0.12.0+1

No same issues found.

• [X] Yes, I search all issues but not found.

Steps to Reproduce

1. flutter create webf_example

2. cd webf_example

3. flutter pub add webf

4. modify the code in lib/main.dart as the follows.

   import 'package:flutter/material.dart';
   import 'package:webf/webf.dart';
   
   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     // This widget is the root of your application.
     @override
     Widget build(BuildContext context) {
       final MediaQueryData queryData = MediaQuery.of(context);
       final Size viewportSize = queryData.size;
   
       return Scaffold(
           body: Center(
         child: Column(
           children: [
             WebF(
               devToolsService: ChromeDevToolsService(), // Enable Chrome DevTools Services
               viewportWidth: viewportSize.width - queryData.padding.horizontal, // Adjust the viewportWidth
               viewportHeight: viewportSize.height - queryData.padding.vertical, // Adjust the viewportHeight
               bundle: WebFBundle.fromUrl('https://andycall.oss-cn-beijing.aliyuncs.com/demo/demo-vue.js'), // The page entry point
             ),
           ],
         ),
       ));
     }
   }
   

5. flutter run -d windows

Code example

The example code on readme.

Expected results

work as expected

Actual results

Error with lib/main.dart(22,30): error GE5CFE876: The method 'ChromeDevToolsService' isn't defined for the class 'MyApp'. [D:\code\flutter\webf_example\build\windows\flutter\flutter_assemble.vcxproj]

Affected version

main

No same issues found.

• [X] Yes, I search all issues but not found.

Steps to Reproduce

Code example

ArgumentError: Invalid argument(s): Failed to load dynamic library 'libwebf.so': dlopen failed: library "libwebf.so" not found #0 _open (dart:ffi-patch/ffi_dynamic_library_patch.dart:11) #1 new DynamicLibrary.open (dart:ffi-patch/ffi_dynamic_library_patch.dart:20) #2 WebfDynamicLibrary.ref (package:webf/src/bridge/dynamic_library.dart:40) #3 _registerPluginByteCode (package:webf/src/bridge/to_native.dart:257) #4 registerPluginByteCode (package:webf/src/bridge/to_native.dart)

Expected results

can load library

Actual results

some android platform(such as ,vivo/oppo, os 6.0) load libwebf.so error。

使用的 Kraken 版本 ｜ What version of kraken are you using

kraken：0.11.0 集成：在 flutter 中集成 flutter 版本：2.8.1 运行设备：安卓手机 官网的 demo 是没问题的，但是用 vuecli 创建的demo，会有这个报错

重现步骤 ｜ Steps To Reproduce

打开 app 后，首页是 firstRoute，点击按钮后第一次跳转到 secondRoute（kraken）是正常的。返回到首页再跳转 secondRoute（kraken）就会这样

重现代码 | Code example:

// main.dart
import 'package:flutter/material.dart';
import 'package:kraken/kraken.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstRoute(),
    );
  }
}


class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}


class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 链接是：vuecli 创建的项目并build 后将 app.js 上传到 cdn 生成的链接，和官网的 https://andycall.oss-cn-beijing.aliyuncs.com/demo/guide-styles.js 是一个意思，我放在下面这个链接里了
    // https://raw.githubusercontent.com/DWarrior222/node-static-server/master/app.226ff3cb.js
    Kraken kraken = Kraken(bundle: KrakenBundle.fromUrl('https://test.com/xxxxx.js'));
    return kraken;
  }
}

预期结果 ｜ Expected results: 重复操作 “firstRoute 跳转到 secondRoute 后，返回 firstRoute”。页面都正常展示

实际结果 ｜ Actual results: firstRoute 跳转到 secondRoute 后，返回 firstRoute，再次跳转到 secondRoute 会报错 app 会黑屏

Affected version

0.13beta

No same issues found.

• [X] Yes, I search all issues but not found.

Steps to Reproduce

.myclass:last-child{

}

Code example

.myclass:last-child{

}

Expected results

support

Actual results

not support

Affected version

main branch

No same issues found

• [X] Yes, I search all issues but not found.

Bug type

CSS/DOM Style

Which frontend framework you are using.

Taro

Steps to reproduce

加载如下HTML即可复现

Code example

<!DOCTYPE html>
<html>
<head>
  <style>
    .tipButton {
      display: flex;
      justify-content: center;
      align-items: center;
      background: -webkit-linear-gradient(right, #00cf37 0, #45dc6d 100%);
      background: -o-linear-gradient(right, #00cf37 0, #45dc6d 100%);
      background: linear-gradient(270deg, #00cf37 0, #45dc6d 100%);
      border-radius: 20px;
      padding: 7px 28px;
      color: #fff;
      font-size: 14px;
      margin-top: 12px;
      height: 31px;
    }
  </style>
</head>
<body>
<div class="container">
  <button type="button" class="tipButton">我是按钮</button>
</div>
<script>
  console.log("Welcome to webf!");
</script>
</body>
</html>

Expected results

正常显示出带有渐变背景色的按钮

Actual results

仅显示出了文本内容

抛出异常如下

Performing hot restart...
Syncing files to device iPhone 14 Pro...
Restarted application in 623ms.
flutter: line 6, column 50: expected ), but found ,
\^[[34m  ╷\^[[0m
\^[[34m6 │\^[[0m       background: -webkit-linear-gradient(right, \^[[31m#\^[[0m00cf37 0, #45dc6d 100%);
\^[[34m  │\^[[0m \^[[31m                                                 ^<…>
flutter: Unknown TOKEN
#0      TokenKind.kindToString (package:webf/src/css/parser/token_kind.dart:473:9)
#1      Token.toString (package:webf/src/css/parser/token.dart:55:30)
#2      _StringBase._interpolate (dart:core-patch/string_patch.dart:853:19)
#3      CSSParser.identifier (package:webf/src/css/parser/parser.dart:1179:55)
#4      CSSParser.simpleSelectorTail (package:webf/src/css/parser/parser.dart:738:27)
#5      CSSParser.simpleSelector (package:webf/src/css/parser/parser.dart:712:14)
#6      CSSParser.simpleSelectorSequence (package:webf/src/css/parser/parser.dart:642:11)
#7      CSSParser.processSelector (package:webf/src/css/parser/parser.dart:578:26)
#8      CSSParser.processSelectorGroup (package:webf/src/css/parser/parser.dart:560:22)
#9      CSSParser._nestedSelector (package:webf/src/css/parser/parser.dart:519:20)
#10     CSSParser.processDeclarations (package:webf/src/css/parser/parser.dart:541:27)
#11     CSSParser.processRule (package:webf/src/css/parser/parser.dart:457:28)
<…>
flutter: WebF DevTool listening at ws://10.0.191.162:9222
flutter: Open Chrome/Edge and enter following url to your navigator:
flutter:     devtools://devtools/bundled/inspector.html?ws=10.0.191.162:9222

Feature type

DOM API

The spec link.

https://developer.mozilla.org/en-US/docs/Web/API/Document/scripts

How much important for you

third-party library need

Affected version

0.13.1+1

No same issues found

• [X] Yes, I search all issues but not found.

Bug type

JavaScript

Which frontend framework you are using.

flutter 3.3.9

Steps to reproduce

1. 创建一个FlutterWeb工程，修改代码为Code example内容
2. 通过 flutter run -d chrome --web-port 8888 --web-renderer=html --release 运行服务
3. 浏览器访问能正常显示标签内容，点击能跳转
4. 在webf工程加载运行的服务地址，无法正常显示

<body>
  ...
  <flt-glass-pane>
      <flt-platform-view>
          <a id="sss-a0" href="https://flutter.cn/" style="border: none; height: 100%; width: 100%;">ssss</a>
      </flt-platform-view>
  </flt-glass-pane>
</body>

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;
import 'dart:ui' as ui;

import 'package:flutter/widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WebAnchorWidget();
  }
}

class WebAnchorWidget extends StatefulWidget {
  final String? url;

  const WebAnchorWidget({
    Key? key,
    this.url,
  }) : super(key: key);

  @override
  State<WebAnchorWidget> createState() => _WebAnchorWidgetState();
}

class _WebAnchorWidgetState extends State<WebAnchorWidget> {
  @override
  void initState() {
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'webview-a',
      (int viewId) => html.AnchorElement()
        ..id = 'webview-a$viewId'
        ..href = "https://flutter.cn/"
        ..text = "aaa"
        ..style.border = 'none',
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(
      viewType: 'webview-a',
      onPlatformViewCreated: (int viewId) {
        final html.AnchorElement element = html.document
            .getElementById('webview-a$viewId')! as html.AnchorElement;
        if (widget.url != null && widget.url != element.href) {
          element.href = widget.url;
        }
      },
    );
  }
}

    return Scaffold(
      appBar: appBar,
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          children: [
            _kraken = WebF(
              devToolsService: ChromeDevToolsService(),
              viewportWidth: viewportSize.width - queryData.padding.horizontal,
              viewportHeight: viewportSize.height -
                  appBar.preferredSize.height -
                  queryData.padding.vertical,
              bundle: WebFBundle.fromUrl('http://10.168.50.60:8000/'),
            ),
          ],
        ),
      ),
    );

正常显示标签内容

W/WEBF_NATIVE_LOG(17592): Service worker not supported (or configured). {serviceWorkerVersion: '2585742326'}
D/WEBF_NATIVE_LOG(17592): Injecting <script> tag.
E/WEBF_NATIVE_LOG(17592): TypeError: not a function
E/WEBF_NATIVE_LOG(17592):     at <anonymous> (http://10.168.50.60:8000/flutter.js:79:25)
E/WEBF_NATIVE_LOG(17592):     at Promise (native)
E/WEBF_NATIVE_LOG(17592):     at _loadEntrypoint (http://10.168.50.60:8000/flutter.js:80:30)
E/WEBF_NATIVE_LOG(17592):     at _loadWithServiceWorker (http://10.168.50.60:8000/flutter.js:108:21)
E/WEBF_NATIVE_LOG(17592):     at loadEntrypoint (http://10.168.50.60:8000/flutter.js:48:19)
E/WEBF_NATIVE_LOG(17592):     at <anonymous> (vm://:8:23)
E/WEBF_NATIVE_LOG(17592): 
I/get.webf_widge(17592): ProcessProfilingInfo new_methods=1305 is saved saved_to_disk=1 resolve_classes_delay=8000

type 'Null' is not a subtype of type 'ContainerParentDataMixin<RenderBox>' in type cast
    #0      RenderBoxModel.getPreviousSibling (package:webf/src/rendering/box_model.dart:1371:63)
    #1      Element.addToContainingBlock (package:webf/src/dom/element.dart:776:50)
    #2      Element._updateRenderBoxModelWithPosition.<anonymous closure> (package:webf/src/dom/element.dart:756:15)
    #3      List.forEach (dart:core-patch/growable_array.dart:433:8)
    #4      Element._updateRenderBoxModelWithPosition (package:webf/src/dom/element.dart:755:32)
    #5      Element.setRenderStyleProperty (package:webf/src/dom/element.dart:1247:9)
    #6      Element.setRenderStyle (package:webf/src/dom/element.dart:1536:5)
    #7      Element._onStyleChanged (package:webf/src/dom/element.dart:1613:7)
    #8      CSSStyleDeclaration._emitPropertyChanged (package:webf/src/css/style_declaration.dart:566:22)
    #9      CSSStyleDeclaration.flushPendingProperties (package:webf/src/css/style_declaration.dart:468:7)
    #10     Element.attachTo (packa