[Bug report] Black bars when using in mobile browser. about flutter_tilt HOT 5 CLOSED

Hi~ @iamfirdous Thank you for your time. 😄

Maybe the problem is that the web renderer is HTML.
It looks like your web renderer is using the default configuration:

renderer: auto
auto (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser.

So mobile will use HTML.

Please try CanvasKit to see if this problem still occurs.
You can configure it in web/index.html as follows:

......
<script>
    window.addEventListener('load', function(ev) {
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: function(engineInitializer) {
        // here
        let config = {
          renderer: "canvaskit",
        };
        engineInitializer.initializeEngine(config).then(function(appRunner) {
          appRunner.runApp();
          ......
        });
      }
    });
  });
</script>
......

And build the web like this:

$ flutter build web --web-renderer canvaskit --release

from flutter_tilt.

@iamfirdous
The Tilt widget relies heavily on Transform for some of its effects.

Unfortunately, Flutter's web platform has some weird rendering issues, whether it's CanvasKit or HTML (especially when using transform and canvas related widgets). 😂

I also reported an issue to Flutter about the Tilt widget turning black in HTML: flutter/flutter#147129.

CanvasKit was chosen because it provides the most consistent rendering possible and reduces the risk of inconsistent rendering across browsers.

CanvasKit: This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 1.5MB in download size. CanvasKit uses WebGL to render Skia paint commands.

from flutter_tilt.

@AmosHuKe
Thank you for the detailed clarification of the Tilt widget issue on mobile browsers. I also greatly appreciate your effort in raising the issue on Flutter GitHub. Your insights are invaluable for understanding the problem. I'm looking forward to seeing how it can be resolved to improve cross-platform usability. Since the issue is resolved for me, I'll go ahead and close it.

from flutter_tilt.

@iamfirdous
Thanks again for your feedback and time!

from flutter_tilt.

@AmosHuKe That made a huge difference. I assume your package is designed to work with canvaskit on the web. Could you elaborate on the differences between the canvaskit and HTML renderers? One observation I made while using canvaskit is a slight jitter during the initial page scroll. Nevertheless, thanks a lot for your assistance.

from flutter_tilt.