I am developing a firefox os app which has a single html page. Different sections of app are created as divisions with 100% width and height with fixed position and with different z-index values(It is created like one division over the other). It is running just fine on browser and of course the firefox os simulator. But in my firefox os device (Spice MIFX1) the app is fine but when we maximize our app after minimizing by pressing the "o" button, may be due to low specification of the device we can see the different divisions getting stacked one over the other which may affect the app perfection and user experience. The app will then run just fine but I don't want the user to see the divisions getting stacked. This problem is not there in the simulator or in the browser may be because it is running faster in my laptop. Is there a way to avoid this weird scene of getting stacked? Maybe something which can hide this stacking process? I think this is happening due to the slow execution of the script which is a part of the Firefox OS (The script to be run when the app window is maximized) because during maximizing I don't have any scripts to be executed in my app. What is the right procedure to avoid this problem due to poor hardware specifications?
Would setting element.style.display = "none"; be useful to set on all "divisions" that weren't currently being shown? That way only the top would be shown? This might leave the screen white as the other divisions are being added then composited. Also, I'm curious if it would be more performant to completely remove unshown divisions from the DOM, and only add the shown division to the DOM, ever. This might not work if you need multiple divisions to be shown at once (but I'm not sure what your UI/UX looks like).