# Phaser **URL:** \ **Category:** Phaser 3\ **Created:** [December 26, 2020, 10:34am UTC](https://phaser.discourse.group/t/phaser/8460 "2020-12-26T10:34:54Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![parth280197](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@parth280197](https://phaser.discourse.group/u/parth280197)\ **Post date:** [December 26, 2020, 10:34am UTC](https://phaser.discourse.group/t/phaser/8460/1 "2020-12-26T10:34:54Z")
I have create a simple animation screen using phaser and its **rendering perfect** and **invoking all pointer events** like pointerover, pointerout, pointerup and pointerdown on button `btn` as expected for **browser**. But when I render same game using **WebView** its rendering screen but **its not invoking** any **pointer events**. To confirm JavaScript is working I have tested by adding `eventlistner` on `window` and it was working. ``` var config = { type: Phaser.CANVAS, width: 650, height: 900, canvas: document.getElementById('myCustomCanvas'), scale: { mode: Phaser.Scale.FIT, width: 750, height: 1334, parent: 'game' }, physics: { default: 'arcade', arcade: { gravity: { y: 0 } } }, scene : { preload: function(){game.preload(this, 'asset_url');}, create: function(){game.create(this);}, update: function(){game.update(this);}, } }; function game(config) { this.start = function(config) { this.phaserGame = new Phaser.Game(config); }; this.create = function() { var btn = this.scene.add.sprite(375, 665, 'btn'); btn.setInteractive() .on('pointerover', () => { console.log('pointerover'); }) .on('pointerout', () => { console.log('pointerout'); }) .on('pointerdown', () => { console.log('pointerdown'); }) .on('pointerup', () => { console.log('pointerup'); }); }; } ``` I am using Xamarin Forms WebView to render game in mobile. My setting for WebView is as follow. ``` var webView = CreateNativeControl(); webView.SetWebViewClient(new HTMLGameWebClient(this)); webView.Settings.LightTouchEnabled = true; webView.Settings.JavaScriptEnabled = true; webView.Settings.DomStorageEnabled = true; webView.Settings.MediaPlaybackRequiresUserGesture = false; SetNativeControl(webView); ``` I also have conditional CSS which is used only if canvas is rendering in mobile. ``` canvas { width: 100vw !important; height: unset; } ``` Thanks in advance for any helps or suggestions. ---
**Author:** ![msanatan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/msanatan/32/4502_2.png) [@msanatan](https://phaser.discourse.group/u/msanatan)\ **Post date:** [December 27, 2020, 12:08pm UTC](https://phaser.discourse.group/t/phaser/8460/2 "2020-12-27T12:08:06Z")
Admittedly not sure as I haven’t use Xamarin and Phaser. Because of that extra layer, let’s take another step to be sure the issue is specifically between Phaser events + Xamarin web view. If you create a non-Phaser JS page where you click on a button in the DOM and handle those events, do the pointer events work? If it doesn’t, then it’s a wider issue with your Xamarin web view setup. If it does, then it’s more of an issue with Phaser. Well, we should go a layer closer with WebGL/canvas before blaming Phaser. The idea is to go at a basic example and eliminate possibilities. If your game doesn’t need to be in a Xamarin app, check out Capacitor which can generate an APK for you: > **[Capacitor: Cross-platform native runtime for web apps](https://capacitorjs.com/)** > > Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript Good luck! ---
**Author:** ![parth280197](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@parth280197](https://phaser.discourse.group/u/parth280197)\ **Post date:** [December 27, 2020, 7:04pm UTC](https://phaser.discourse.group/t/phaser/8460/3 "2020-12-27T19:04:41Z")
Hi @msanatan, Thanks for suggestion. I have tried adding pointover event only on canvas and it seems its working perfect. but not phaser events. ---
**Author:** ![msanatan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/msanatan/32/4502_2.png) [@msanatan](https://phaser.discourse.group/u/msanatan)\ **Post date:** [December 27, 2020, 10:52pm UTC](https://phaser.discourse.group/t/phaser/8460/4 "2020-12-27T22:52:11Z")
Hola @parth280197, it’s good that you checked. I’d say the most important thing is to see what’s happening in the web view. Here’s a guide I found on debugging the Xamarin Forms webview: > **[Xamarin Forms Debugging The WebView In Chrome – Xamarin Help](https://www.xamarinhelp.com/xamarin-forms-debugging-webview/)** If you can get the debugger running and share any error output, I’m sure the much smarter members of the community can sort you out 😅 ---
**Author:** ![parth280197](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@parth280197](https://phaser.discourse.group/u/parth280197)\ **Post date:** [December 28, 2020, 2:58pm UTC](https://phaser.discourse.group/t/phaser/8460/5 "2020-12-28T14:58:40Z")
Hello @msanatan I already attached debugger with WebView there was no error in it I also figured out the issue It was `mode: Phaser.Scale.FIT` configuration I removed it and all events starts executing fine. for some reason the pointer events on sprites are misplaced in different locations. Thanks for your help. ---
**Author:** ![msanatan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/msanatan/32/4502_2.png) [@msanatan](https://phaser.discourse.group/u/msanatan)\ **Post date:** [December 28, 2020, 3:39pm UTC](https://phaser.discourse.group/t/phaser/8460/6 "2020-12-28T15:39:47Z")
Awesome! I’m glad you figured it out. It seems that someone else had a similar problem with that scaling mode: > [@Pointerdown event returns weird pointer coordinates when on Phaser.Scale.FIT scale mode](https://phaser.discourse.group/t/pointerdown-event-returns-weird-pointer-coordinates-when-on-phaser-scale-fit-scale-mode/1953): > > Hi, I’m not sure if this is a bug or is it that I’m doing something wrong: I have this: var config = { type: Phaser.AUTO, parent: gameConfig.parentId, scale: { width: screen.width, height: screen.height, mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER\_BOTH, autoRound: true, }, render: { transparent:true, }, scene: [Scene01(gameConfig.mainScnConfig)] }; var game = new Phaser.Game(config); And the on the scene … Hopefully that discussion helps if you need to use it!