Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

embedding game in <iframe> size issues between browsers #34851

Closed
define-private-public opened this issue Jan 6, 2020 · 7 comments
Closed

embedding game in <iframe> size issues between browsers #34851

define-private-public opened this issue Jan 6, 2020 · 7 comments

Comments

@define-private-public
Copy link

@define-private-public define-private-public commented Jan 6, 2020

Godot version:
3.1.2

OS/device including version:
HTML5 Export

Issue description:
So I have a game that I created to run at 800x800 pixels. I was able to export it for HTML5. After reading the "Exporting for the Web" document, I got the idea to put the game in an <iframe>. The only issue is that in Firefox, my game only looks good if I do <iframe width="640" height="640"> and in Chromium I need to do <iframe width="615" height="615">

Something about this doesn't feel right, or work right. I have to add some JavaScript to check what the browser is, and then resize the iframe.

@define-private-public define-private-public changed the title embedding game in <iframe> size issues between browers embedding game in <iframe> size issues between browzers Jan 6, 2020
@Calinou
Copy link
Member

@Calinou Calinou commented Jan 6, 2020

Can you upload a minimal reproduction project, please? This would make it much easier to diagnose the issue.

@define-private-public
Copy link
Author

@define-private-public define-private-public commented Jan 6, 2020

I'll try to get a reproduction up within a day or two. I also want to report that when I switched to my Windows partition (same machine), and then tested Firefox and Chrome, there were also sizing differences w/ the iframe that made things look quite ugly.

@define-private-public define-private-public changed the title embedding game in <iframe> size issues between browzers embedding game in <iframe> size issues between browsers Jan 6, 2020
@define-private-public
Copy link
Author

@define-private-public define-private-public commented Jan 7, 2020

Got this done a bit quicker than planned. The full game I have is up here: https://16bpp.net/games/pucker-godot-edition-2020/

Attached is a very stripped down version of the game that I was making (most scripts are removed, had to remove the custom font for licensing reasons). Do the HTML5 export to the directory html5/, and make sure the file is called game.html. You can then visit the test.html file where I have that <iframe width="640" height="640"> set up (though I want 800x800).

PUG_stripped_down.zip

I also suggest visiting game.html by itself as well. As there are some layout discrepancies as well too.

@define-private-public
Copy link
Author

@define-private-public define-private-public commented Jan 10, 2020

Someone on Reddit pointed out I was missing the test.html in the .zip file. It's now been included in there.

@define-private-public
Copy link
Author

@define-private-public define-private-public commented Jan 11, 2020

I was able to resolve the issue by changing the project settings of "Stretch Mode" to 2d and "Aspect Ratio" to keep.

I think that something should be mentioned about this in the Exporting for the Web doc. Since I'm pretty sure that other newcomers might have this same thing happen to them too.

@KoBeWi
Copy link
Member

@KoBeWi KoBeWi commented Nov 28, 2020

Can anyone still reproduce this bug in Godot 3.2.3 or any later release?

If yes, please ensure that an up-to-date Minimal Reproduction Project (MRP) is included in this report (a MRP is a zipped Godot project with the minimal elements necessary to reliably trigger the bug). You can upload ZIP files in an issue comment with a drag and drop.

@Faless
Copy link
Collaborator

@Faless Faless commented Apr 6, 2021

Closing as fixed in 3.3, feel free to comment if you can still reproduce.

@Faless Faless closed this as completed Apr 6, 2021
@akien-mga akien-mga added this to the 3.3 milestone Apr 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants