mobile aspect ratio scaling incorrectly

I can't seem to figure out why the mobile view of a-frame camera aspect ratio (a-marker-camera) is completely off. it's scaled so everything looks skinny in portrait mode, and wide in landscape. I am also getting this error in console:

dpdb.js:79 Failed to recalculate device parameters.

I've adjusted the css, and set the canvas width/height on a settimeout after it renders. Any way around this issue?

The body gets crazy high dimensions on mobile: width: 3557.33px; height: 2668px; margin-left: -1028.67px; margin-top: 0px;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="./dist/aframe-ar.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<a-scene embedded arjs rjs='trackingMethod: best;'>
<a-marker-camera preset="custom" type='pattern' url='./customMarker/pattern-marker5.patt'>
<a-entity
    animation-mixer="loop: repeat"
    id="Gunnar"
    scale="0 0 0"
    json-model="src: url(./Models/Gunnar-NewYear.json);">
</a-entity>
</a-marker-camera>
</a-scene>
<div id="confetti"></div>
</body>
<script src="jquery.confetti.js"></script>
<script>
function init() {
var stageWidth = $( window ).width();
var stageHeight = $( window ).height();
$('.a-canvas').attr('width', stageWidth);
$('.a-canvas').attr('height', stageHeight);
console.log(stageWidth);
}
setTimeout(function(){
init();
}, 2000);
</script>
</html>

jeromeetienne / AR.js

mobile aspect ratio scaling incorrectly #289