Can not control camera on Flutter Webview with Stack Layout. IOS platform

CesiumJS
1

I’m using flutter to build a app with cesium. In my case, i want to stack some interactive buttons on top of the webview which embed the cesium(Just like the CSS position layout in Web Technology.).I’ve found a problem on IOS which works well on Android.When tap once the flutter element which on top of the cesium(webview), the cesium camera control became strange. When tap twice, the cesium camera control become unable to work.I had tried another webgl demo(http://madebyevan.com/webgl-water/).It work well.And i had tried another webview plugin, but i got the same result. So I guess it’s a error inside cesium.
Here’s the most simplify flutter main function and the corresponding screenshot:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
//import 'package:flutter_inappwebview/flutter_inappwebview.dart';
void main() {
  runApp(MaterialApp(
    home: SafeArea(
      child: Stack(
        children: <Widget>[
          WebView(
//            work well
//            initialUrl: 'http://madebyevan.com/webgl-water/',

//          the most simplify cesium example that can reproduce the problem
            initialUrl: 'https://sandcastle.cesium.com/standalone.html#c=bY9Pa8MwDMW/ivGpgyGz6+qGQq+FHQY7+aI6Wmuq2MFSUtJPvyS9jK26vaf3058RqxkT3aiancl0MweSNHTwtXqbYOOqDyUrpkw12JdtyPbVetGJqQnZrLVPXV+qmqHyBsApdT2jkrjTEK+kEEUWcIl69xv1bRpNandPNpnIKDJ3vgfmz3SnYBvv5vw/lAu2KZ8/RqqM0xK7vDXHhwkA3s3yOaml8Anrn8nzfxfVXt6dE8xtRFEmeBwIsXTujMxUJ/cD',
            javascriptMode: JavascriptMode.unrestricted,
          ),
          //  the fake interactive button on top of cesium(tap here)
          Positioned(
            top: 100,
            width: 200,
            child: Container(
              height: 50,
              color: Colors.red,
            ),
          ),
        ],
      ),
    ),
  ));
}

image
image1080×1440 185 KB

My IOS device is iphoneX with IOS 13.4.1

Is this a bug in cesium? Could anyone tell me how to fix this problem?
Thanks a lot~

2

So when you tap on this HTML element you create (that red rectangle in the top left?) you can no longer move the camera by tapping/dragging on the globe? My best guess is that the HTML element perhaps takes away the WebView’s focus from the canvas? Can you try seeing if triggering the following code fixes it viewer.scene.canvas.focus(); (as described here: Cesium captures mouse click events · Issue #4126 · CesiumGS/cesium · GitHub).

Does clicking on the home button in the top fix it?

3

hi omar:
Thanks for reply.

So when you tap on this HTML element you create (that red rectangle in the top left?)

Yes, but it is not an HTML element, it’s an flutter element.

you can no longer move the camera by tapping/dragging on the globe?

Yes.

I had tried your suggestion, but the issue still exists.
I guess it is not a 'focus’issue. It’s more like an ‘touch position’ issue.
It seems that the touch position has been stored After each tap on the red rectangle.
So when after i tap the red rectangle once (one touch position stored), then i touch move on the globe (the canvas element) with one fingure. The ‘ScreenSpaceEventType.PINCH_MOVE’ event will be triggered.
When after i tap the red rectangle again (two touch position stored), then i can no longer control the camera.

4

It sounds like it may be a bug in CesiumJS, but you’ll need to be able to reproduce it in Sandcastle to confirm.

Have you tried asking on a Flutter forum/community? That may shed some light on how to reproduce this issue outside of Flutter.

What’s the difference? If it’s in the web view, it must be translated to HTML/canvas at some point, or is this not part of the web view?

5

You’ll find out that it’s just the simplest Hello world program :joy:

The rectangle is not a part of webview. It is a sibling element of the webview.

image
image691×521 18.7 KB

6

Hi hayderGo,
I encountered the same problem. I was wondering did you find some solution on the flutter side?

7

@hayderGo