Rotation on mobile breaks my VrIconButton position

Hi there,
I want to make my canvas responsive in computer and tablet and mobile. So I have started with my canvas and I succeeded. But now I would like to make my VrIconButton (icon of VRExperienceHelper) and I have succeeded to make the VR button in different size in function of the size of the screen. My problem: When I rotate , I can’t move the VR button, he is still in the same place, even if I set the css style top at 0, when I console it, it shows “0px” for top value, but on the inspector, it is still the same value that before. But When I update the page, the css is good… Because I did some different case of the size’s screen. It’s only when I am rotating the mobile (in the both way landscape->portrait and portrait-> landscape). I have tried " @media screen and (orientation: landscape)" but no success. Here is my code:

 $("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.2);
 $("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.2);

if(deviceType=="desktop")
{	

$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.11);
$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.08);

$("#babylonVRiconbtn").parent().css({position: 'relative'});
$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.9 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});

$(window).on("resize", function(){   
	$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.11);
	$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.08);
	
	
	
})

 }

 else if (deviceType == "mobile")
{
	$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.1);
	$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.18);
	$("#babylonVRiconbtn").parent().css({position: 'relative'});
	$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.8 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
	if($(window).height()  < 450)
	{
		
		console.log("<450")
		$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.2);
		$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.1);
		$("#babylonVRiconbtn").parent().css({position: 'relative'});
		$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.9 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.8 , position:'absolute'});
	
	}

	else if($(window).height()  >= 450 && $(window).height() < 600)
	{
		console.log("<600 & >450")
		$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
		$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
		$("#babylonVRiconbtn").parent().css({position: 'relative'});
		$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
	}
else if ( $(window).height() < 700 && $(window).height() >600)
	{
		console.log("<700 >600")
		$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
		$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
		$("#babylonVRiconbtn").parent().css({position: 'relative'});
		$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
	}
	
	
	$(window).on("resize", function(){   
		$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.1);
		$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.18);
		$("#babylonVRiconbtn").parent().css({position: 'relative'});
		$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.8 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
		if($(window).height()  < 450)
		{
			console.log("<450 moove")
			$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.2);
			$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.1);
			vr.style.top = "0px"  // vr is the vr Button pick up before with BabylonJS code
			//$("#babylonVRiconbtn").css({left:0 , top:0 , position:'absolute'});
			//document.getElementById("babylonVRiconbtn").style.top = '-1000px';
			console.log("top: ", document.getElementById("babylonVRiconbtn").style.top)
			
		}
	
		else if($(window).height()  >= 450 && $(window).height() < 600)
		{
			console.log("<600 & >450")
			$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
			$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
			$("#babylonVRiconbtn").parent().css({position: 'relative'});
			$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + $("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top + $("#renderCanvas").height()*0.85 , position:'absolute'});
		}
	else if ( $(window).height() < 700 && $(window).height() >600)
		{
			console.log("<700 >600")
			$("#babylonVRiconbtn").outerHeight($("#renderCanvas").height()*0.12);
			$("#babylonVRiconbtn").outerWidth($("#renderCanvas").width()*0.12);
			$("#babylonVRiconbtn").parent().css({position: 'relative'});
			$("#babylonVRiconbtn").css({left:$("#renderCanvas").position().left + 
 $("#renderCanvas").width()*0.85 , top:$("#renderCanvas").position().top + 
 $("#renderCanvas").height()*0.85 , position:'absolute'});
		}
	})
}

My problem is only on mobile.

I have also tried :

     $( window ).on( "orientationchange", function( event ) {
 if($(window).width() > $(window).height())
	 {
	 console.log("portrait")
	 }
 else
	 {
	 console.log("landscape");
	 $("#babylonVRiconbtn").css({left:0 ,top:0, position:'absolute'});
	 console.log("top: ", document.getElementById("babylonVRiconbtn").style.top)
	 }
});

Thank you for your help.
Mathieu

Well it would be fantastic if you can repro in the playground what you want to achieve :slight_smile:
But overall this seems like a css question more than a bjs question (we can still help no worries)