Solve issue with webGL canvas alignment/scaling in Safari on iPhone when changing orientation


We have a project using Phaser (using webGL). The page loads in landscape, and we have a rotate screen in there which shows up and tells the user to rotate back to landscape if they rotate to portrait. The problem is that when the device is rotated back to landscape in Safari on the iPhone, the content ends up being mis-aligned/scaled and showing a black bar across the top/bottom of the screen.

We're assuming it's the canvas which Safari is setting inconsistently, so re-centering/scaling that correctly to the viewport size is what we think is needed, but we are open to any options to solve this.

If you believe you can solve these issues, please let us know. We'll need you to sign an NDA then we can provide you with a version of the project for testing, along with screenshots and video of the issues happening, and answer any specific questions. When you replay to this please include the word "elephant" in your response so we know you have read the entire description, any responses without that will simply be ignored.

Skills required:

Please conform you have the knowledge and skills to solve this (html/css, javascript and experience with the quirks of iOS/Safari are essential, experience with multi platform web games/web apps across different platforms is essential, some experience with Phaser [login to view URL] specifically might be helpful but probably not essential.


Updates to the project to solve the above issue, along with an explanation of what was changed for the fix. We'll also need to prove that the changes don't have any knock on effects causing errors on Android, iPhone Chrome, iPad, and desktop) We will test at our end on a range of devices and iOS versions to confirm. Note, we are only targetting iPhone7 upwards but the issues listed above only appear to be affecting more modern devices (iPhoneX up)

Any questions please ask. Please prove that you have read and understood the project before bidding.

Kemahiran: JavaScript, HTML5, CSS, Web Development

Lihat lagi: mobile safari iphone, safari iphone sdk, remake safari iphone, floating menu safari iphone, start safari iphone app development, mms stream safari iphone, cocoa scaling images iphone, rtsp safari iphone, safari iphone upload, safari iphone upload photos, safari iphone mp3 jquery, php safari iphone, tweak safari iphone, safari iphone joomla, website fix safari iphone, problem jquery safari iphone, scan safari iphone, safari iphone flip javascript, safari iphone video place, safari iphone scan barcode

Tentang Majikan:
( 40 ulasan ) Truro, United Kingdom

ID Projek: #30542273

Dianugerahkan kepada:


Dear Client. I am well versed Phaser Developer. I hope to have a chat with you for the project. I have 17 years of exp on programing and I have developed app with Phaser /Cordova for 2 years. I think I could help you. Lagi

$250 USD dalam sehari
(1 Ulasan)

3 pekerja bebas membida secara purata $218 untuk pekerjaan ini

(118 Ulasan)

Hello, there. I am WebGL expert. Please check my portfolios. Then you could get my skills. My prior task is to apply transparencies to each models that are rendered from on vertex array and eliminate the gimbal lock. Lagi

$250 USD dalam 3 hari
(1 Ulasan)