Ionic-framework: bug:

[acemagic94]

Bug Report

Ionic version:
[x] 4.x
[x] 5.x

Current behavior:

I've made a game using ionic + typescript + phaser 3.0

When I load the app on firefox with @ionic/angular 4.1.0
then it loads in firefox it loads perfectly fine,
but when I upgrade to @ionic/angular 4.11.13 or 5.1.0 it display the game super small in a way that it's impossible for me to play or test.

Expected behavior:

if I rollback to @ionic/angular 4.1.0 then everything is fine again like this.

Steps to reproduce:

ionic serve --lab + firefox

Related code:

here's my package.json

"dependencies": {
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/fire": "^5.4.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/app-version": "^5.29.0",
"@ionic-native/core": "^5.29.0",
"@ionic-native/file": "^5.29.0",
"@ionic-native/keyboard": "^5.29.0",
"@ionic-native/mobile-accessibility": "^5.29.0",
"@ionic-native/splash-screen": "^5.29.0",
"@ionic-native/status-bar": "^5.29.0",
"@ionic/angular": "^4.1.0",
"@ionic/storage": "^2.2.0",
"cordova-android": "^8.0.0",
"cordova-browser": "6.0.0",
"cordova-custom-config": "5.1.0",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-ionic-keyboard": "2.1.3",
"cordova-plugin-ionic-webview": "4.1.0",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-network-information": "git+https://github.com/apache/cordova-plugin-network-information.git",
"core-js": "^2.6.11",
"firebase": "^6.6.2",
"lodash": "^4.17.20",
"ml5": "^0.3.1",
"phaser": "^3.24.1",
"phaser-component-library": "^2.0.0",
"phonegap-plugin-mobile-accessibility": "^1.0.5",
"rxjs": "^6.5.5",
"tslib": "^1.14.1",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/architect": "^0.13.10",
"@angular-devkit/build-angular": "^0.13.10",
"@angular-devkit/core": "^7.3.10",
"@angular-devkit/schematics": "^7.3.10",
"@angular/cli": "7.3.9",
"@angular/compiler": "^7.2.16",
"@angular/compiler-cli": "^7.2.16",
"@angular/language-service": "^7.2.16",
"@ionic/angular-toolkit": "~1.5.1",
"@ionic/lab": "2.0.2",
"@types/jasmine": "^2.8.17",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.0.12",
"codelyzer": "~4.5.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-splashscreen": "^5.0.4",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.4",
"ts-node": "~8.1.0",
"tslint": "~5.17.0",
"typescript": "~3.1.6"
},

insert short code snippets here

Other information:

Ionic info:

Ionic:

Ionic CLI : 5.4.16 (C:UsersAceAppDataRoamingnpmnode_modulesionic)
Ionic Framework : @ionic/angular 4.1.0
@angular-devkit/build-angular : 0.13.10
@angular-devkit/schematics : 7.3.10
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 10.0.0
Cordova Platforms : 6.0.0, android 8.1.0, browser
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 11 other plugins)

Utility:

cordova-res : 0.15.1
native-run : not installed

System:

Android SDK Tools : 26.1.1 (C:UsersAceAppDataLocalAndroidSdk)
NodeJS : v12.16.3 (C:Program Filesnodejsnode.exe)
npm : 6.14.4
OS : Windows 10

[liamdebeasi]

Can you please provide a full GitHub repo that I can use to reproduce the issue?

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[acemagic94]

sure I'll do so and leave it here once it's setup

[acemagic94]

https://github.com/acemagic94/ionic-bug
Here's the copy of my code.
I didn't put the nodes directory.
so it will have to be installed with npm install

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The problem here is likely due to the hydration changes around Ionic Framework v4.6.0-4.6.1. phaser-component does not get height: 100%; width: 100%; added to its inline styles which is why the canvas is so small. Prior to these hydration changes, the styles were set as expected.

It is likely that these styles are being set prior to the hydration of an Ionic app, so the component width and height are both going to be 0. My recommendation here is to add width: 100%; height: 100% to phaser-component directly in your CSS.

[acemagic94]

thanks for the help! I was able to fix it that way. I appreciate you looking into this.