max123 Posted January 4, 2017 Share Posted January 4, 2017 Hi All, Happy new Year! It looks like there's something in v. 2.5 that's causing canvas to change its z-index. There is a screen with a top bar and a close button that sits on top of the canvas element. When you tap on the canvas on a mobile device (iOS 10), the top bar disappears. This does not happen with v. 2.4. Unfortunately, I can't provide a PR this time as it's a massive application. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 4, 2017 Share Posted January 4, 2017 Hello without a repro it's gonna be tough to debug Quote Link to comment Share on other sites More sharing options...
max123 Posted January 4, 2017 Author Share Posted January 4, 2017 Will try to create a mini-example.. Of the top of your head, @Deltakosh, do you remember which part of the framework might set canvas's z-index or possibly position? This behaviour is consistent with both PEP and Hand, and happens when user taps the screen. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 4, 2017 Share Posted January 4, 2017 We do not change the canvas zIndex at all Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted January 4, 2017 Share Posted January 4, 2017 @Deltakosh my html ui also disapeared after i upgraded to 2.5 a few days ago, haven't had time to look at it yet, but here's a quick PG, might be the same issue..; http://www.babylonjs-playground.com/#26VITS#4 a 200x75px orange rectangle should be seen at upper left corner of the canvas. It only seems to be the case when you add it inside the canvas element itself, e.g, if you add it outside canvas element it works; http://www.babylonjs-playground.com/#26VITS#3 but it's of course not placed correctly when the canvas doesn't fit the entire window Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 5, 2017 Share Posted January 5, 2017 I do not touch the canvas at all So this must come from somewhere else. Quote Link to comment Share on other sites More sharing options...
max123 Posted January 5, 2017 Author Share Posted January 5, 2017 Hi @Deltakosh, I've found what's causing the problem! In the the new version of Babylon, you're setting the tabIndex of the Canvas element inside Cameras. This causes the iOS Safari to totally screw up the layout. I haven't tested on other mobile browsers. Is there a reason for adding tab index? Cheers adam 1 Quote Link to comment Share on other sites More sharing options...
max123 Posted January 5, 2017 Author Share Posted January 5, 2017 Quote Link to comment Share on other sites More sharing options...
max123 Posted January 5, 2017 Author Share Posted January 5, 2017 This article explains the issue with Flexbox and tab indexing. Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted January 5, 2017 Share Posted January 5, 2017 when you say you UI disappearing this happened to me on a project where I had a div with the ID ''overlay" on the same page. I dont know if this is related or not. Keep me posted and ill help with this. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 5, 2017 Share Posted January 5, 2017 OMG I did not remember that!! Really sorry What if you set your UI with tabIndex = 2 ? (I did it because we were losing the focus on some specific cases) Quote Link to comment Share on other sites More sharing options...
max123 Posted January 5, 2017 Author Share Posted January 5, 2017 Wouldn't it make more sense to enable tabIndex in Babylon via Camera properties or inside a properties object passed to Cameras' constructor? Like so: constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene, settings:any) { ... } /// Settings { setTabIndex: true, otherProperty: 3253453245 } Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 6, 2017 Share Posted January 6, 2017 It feel easier to me to just set the tabIndex of your UI to 2 Pryme8 1 Quote Link to comment Share on other sites More sharing options...
max123 Posted January 6, 2017 Author Share Posted January 6, 2017 Hi Delta Of course it is easier to change tabIndex of UI! But from consistency point of view this looks like a magic trick. How would a newcomer to Babylon know that the reason his beautiful webgl app is not working on iPhone is because there's a tabIndex set somewhere inside BJS's framework that messes up the layout? And it WILL mess up any layout using flexbox. I'd rather leave it to users to deal with CSS/UI, not the framework as results will be unpredictable at best. It took me good 3-4 hours of googling + searching BJS source code to figure out why it stopped working... And what if I started from scratch? - I'd presume it doesn't work, period. Anyway, it's just my point of view; you're da daddy of Babylon and it's up to you to make these decisions Pryme8 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 6, 2017 Share Posted January 6, 2017 I just would love to remove the tabIndex hack but I just CAN'T remenber why we added it. But I'm sure it was already there in 2.4 so this inconsistency certainly comes from iOS (or I missed something:)) Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 6, 2017 Share Posted January 6, 2017 As an experiment I will remove it from 2.6-alpha. Will see how it behaves Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 6, 2017 Share Posted January 6, 2017 Ok I know why:) Without it I cannot capture the keyboard Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted January 6, 2017 Share Posted January 6, 2017 Why don't you just handle this with CSS I'm confused. Is the UI being handled by bjs or in a separate layer? Quote Link to comment Share on other sites More sharing options...
max123 Posted January 7, 2017 Author Share Posted January 7, 2017 19 hours ago, Deltakosh said: I just would love to remove the tabIndex hack but I just CAN'T remenber why we added it. But I'm sure it was already there in 2.4 so this inconsistency certainly comes from iOS (or I missed something:)) No, I'm pretty sure it wasn't there in 2.4. Quote Link to comment Share on other sites More sharing options...
max123 Posted January 7, 2017 Author Share Posted January 7, 2017 19 hours ago, Deltakosh said: Ok I know why:) Without it I cannot capture the keyboard I seeeeee... Why don't you use smth like element.focus() instead? That's what I did with 2.4. Anyway, I'd leave this outside the framework and let users handle their UI/events. Otherwise, there will always be unhappy bunnies - some about layout (me), some about unintended focus events Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 10, 2017 Share Posted January 10, 2017 I tried focus but for some reasons it was not working on iOS Quote Link to comment Share on other sites More sharing options...
max123 Posted January 11, 2017 Author Share Posted January 11, 2017 It certainly does! I used this approach with v.2.4 when building a game. I can PM you a controller file (Typescript) where I init levels; unfortunately, I can't send the whole code base - NDA. Anyway, here's the game: https://game2016.videotel-cloud.com/ It does run and init properly on touch devices, including iPhone, albeit a tad slow. Our marketing team will probably write smth about it - I'll make sure they include a sentence about tech (Babylon) and a linkey to your site. jerome 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 11, 2017 Share Posted January 11, 2017 Oh please please also ping me when it is out! Quote Link to comment Share on other sites More sharing options...
max123 Posted January 11, 2017 Author Share Posted January 11, 2017 Sure thing! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.