UI Not Functioning As Expected While Using Aframe

[Fro5tyDog]

I have been encountering an issue with my UI where the aframe canvas is making my screen size much bigger than it actually it when its width reaches about 450 pixels.

• A-Frame Version: 1.3.0
• Platform / Device: IOS & Android
• Reproducible Code Snippet or URL:

<div class="dropdown-container" id="dropdown-container"></div> <!-- Dropdown to show model icons -->

<div class="start">
    <img src="./assets/ui_Images/mapIcon.png">
    <button id="start-button">Tap to Start</button>
</div>


<a-scene
    vr-mode-ui="enabled: false"
    embedded
    arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'
    renderer="precision: mediump; antialias: false; alpha: true; logarithmicDepthBuffer: true; colorManagement: true;">
    <a-camera gps-camera rotation-reader wasd-controls-enabled="true"></a-camera>
</a-scene> 

CSS:
/* Styling for the circles */

.circle-container {
position: fixed;
top: 20px;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
z-index: 10; /* Make sure this is above the A-Frame scene /
pointer-events: auto; / Enable pointer events */
}

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: auto; /* Ensure the circles can receive pointer events */
}

.circle img {
width: 80%;
height: auto;
}

.circle-center {
margin: 0 auto;
background-color: #0ee85e;
position: relative;
}

.arrow {
position: absolute;
width: 50%; /* Adjust the width and height as needed */
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url("https://p9n2c8y2.rocketcdn.me/wp-content/uploads/2021/05/24.png.webp") center no-repeat;
background-size: 115% 115%;
z-index: 2000;
}

.text-container {
position: fixed;
display: flex;
justify-content: center;
top: 90px;
width: 100%;
text-align: center;
pointer-events: none;
}

#location-display {
font-size: 20px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px black;
font-family: Arial, sans-serif;
white-space: normal;
}

/* Dropdown styling /
.dropdown-container {
display: none; / Hidden by default /
position: fixed;
top: 80px;
left: 20px;
flex-direction: column;
gap: 10px;
z-index: 10; / Make sure this is above the A-Frame scene /
pointer-events: auto; / Enable pointer events */
}

.dropdown-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
}

/* Selected state /
.dropdown-circle.selected {
background-color: green; / Selected turns green */
}

.dropdown-circle img {
width: 80%;
height: auto;
}

/* CSS to center the start div */
.start {
position: absolute;
background-color: gray;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10px;
z-index: 15;
}

/* CSS for the image /
.start img {
width: 200px; / Set the width of the image /
height: auto; / Maintain aspect ratio */
}

/* Center the button below the image /
.start button {
margin: 10px; / Add space between image and button */
padding: 10px 20px;
font-size: 16px;
border-radius: 10px;
font-weight: bold;
color: rgb(255, 255, 255);
background-color: rgb(10, 156, 10);
border: 2px solid rgb(97, 97, 97);
}

/* Greys out all other UI elements before "Tap to Start" /
.greyed-out {
opacity: 0.5; / Make them semi-transparent /
pointer-events: none; / Disable interaction */
}

/* Hide the start screen once clicked /
.hidden {
display: none;
pointer-events: none; / Disable interaction */
}

I noticed that in the inspector that aframe overwrites the body css properties and makes my justify-content: space-between not work as intended on portrait mode. You can also go into mobile mode in the inspector and shrink the screen horiztonally and see the same error.

I originally used this as a workaround and the UI no longer bugged because aframe won't control my canvas anymore:
body {
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}

However, after implementing that, the models no longer render. As evident when I go into the Aframe inspector.

If anyone has encountered a similar issue and has solved it please reach out to me. I have been stuck on this for weeks and tried almost everything under the sun.

[Fro5tyDog]

TLDR: Aframe canvas not adapting to screen size, changing it and thus causing other HTML elements to follow that width and height instead of the acutal dimensions

[dmarcos]

Use A-Frame 1.6.0 also share simple code to reproduce with https://glitch.com/~aframe otherwise is hard to understand what's going on