testing 4, testing 3 passes

Author: joshualitt

lib/web_ui/lib/src/engine/dom.dart

@@ -162,6 +162,8 @@ class DomElement extends DomNode {}
 DomElement createDomElement(String tag) => domDocument.createElement(tag);
 
 extension DomElementExtension on DomElement {
+  DomHTMLCollection get childrenT =>
+      js_util.getProperty(this, 'children') as DomHTMLCollection;
   List<DomElement> get children =>
       js_util.getProperty<List<Object?>>(this, 'children').cast<DomElement>();
   external String get id;
@@ -497,6 +499,15 @@ extension DomResponseExtension on DomResponse {
       js_util.promiseToFuture(js_util.callMethod(this, 'text', <Object>[]));
 }
 
+@JS()
+@staticInterop
+class DomHTMLCollection {}
+
+extension DomHTMLCollectionExtension on DomHTMLCollection {
+  external int get length;
+  external DomNode? item(int index);
+}
+
 Object? domGetConstructor(String constructorName) =>
     js_util.getProperty(domWindow, constructorName);
 

lib/web_ui/lib/src/engine/html/bitmap_canvas.dart

@@ -1069,20 +1069,22 @@ class BitmapCanvas extends EngineCanvas {
     _canvasPool.endOfPaint();
     _elementCache?.commitFrame();
     // Wrap all elements in translate3d (workaround for webkit paint order bug).
-    /*if (_contains3dTransform && browserEngine == BrowserEngine.webkit) {
-      for (final DomElement element in rootElement.children) {
-        final DomHTMLDivElement paintOrderElement = createDomHTMLDivElement()
-          ..style.transform = 'translate3d(0,0,0)';
-        paintOrderElement.append(element);
-        rootElement.append(paintOrderElement);
-        _children.add(paintOrderElement as html.DivElement);
-      }
-    }*/
+    //if (_contains3dTransform && browserEngine == BrowserEngine.webkit) {
+    //  for (final html.Element element in (rootElement as html.Element).children) {
+    //    final DomHTMLDivElement paintOrderElement = createDomHTMLDivElement()
+    //      ..style.transform = 'translate3d(0,0,0)';
+    //    paintOrderElement.append(element as DomElement);
+    //    rootElement.append(paintOrderElement);
+    //    _children.add(paintOrderElement as html.DivElement);
+    //  }
+    //}
     if (_contains3dTransform && browserEngine == BrowserEngine.webkit) {
-      for (final html.Element element in (rootElement as html.Element).children) {
+      final int childrenLength = rootElement.childrenT.length;
+      for (int i = 0; i < childrenLength; i++) {
         final DomHTMLDivElement paintOrderElement = createDomHTMLDivElement()
           ..style.transform = 'translate3d(0,0,0)';
-        paintOrderElement.append(element as DomElement);
+        final DomElement element = rootElement.childrenT.item(i)! as DomElement;
+        paintOrderElement.append(element);
         rootElement.append(paintOrderElement);
         _children.add(paintOrderElement as html.DivElement);
       }