I'm building a Chrome Packaged App with WebGL and Three.js, with the goal of making a prototype for a 3-D browser. I am using the CSS3D renderer to render a dynamically-created webview
element onto a Three.js plane surface. I've gotten this to work when creating an iframe
element, but when I use a webview
, I get the following result:
The code I'm using to create the webview is:
var webview = document.createElement('webview');
webview.setAttribute('src', 'url erased to protect identity');
webview.style.width = '100%';
webview.style.height = '100%';
element.appendChild(webview);
Where element
is a div
element that is properly scaled to fit on the plane.
How do I make the webview
element stretch to fill the parent div
?
EDIT: The method displayed in the answer to Chrome webview height issue had no visible effect for me.
EDIT 2: I looked at the answer to Why can't I make my div 100% height and looked at it. The really curious thing is that it's not even obvious from the developer tools why it's not working. Here's a screenshot of the developer tools showing the page:
It looks to me like Chrome thinks the webview
is taking that whole space. I honestly don't understand what's going on here. Any explanation is greatly appreciated.