vasturiano/3d-force-graph-vr

Adding <!DOCTYPE html> at the top of the source code causes basic example to fail

micrology opened this issue · 2 comments

micrology commented

Describe the bug
The HTML 5 standard requires an informational declaration <!DOCTYPE html> at the start of an html file.
The source file provided on the README page for the basic example does not include this declaration - it starts with the <head> element. To my astonishment, if you add the missing declaration (and the required <html> and </html> elements) the example no longer works - the generated web page is blank although there are no errors reported in the console.
To Reproduce
Copy the basic example into a file, prepend <!DOCTYPE html><html> and append </html>, and then access this file through a browser. You will see a blank, white page.

Expected behavior
The same as the file without these additions.

Desktop (please complete the following information):

  • OS: Mac OS Monterey
  • Browser Any (tested on Chrome and Firefox) with WebXR emulator extension
  • Version 98

Additional context
I am mystified what could cause this to happen - and Google hasn't helped. It took me a long time to discover that the apparently innocuous DOCTTYPE declaration was causing grief!

vasturiano commented

@micrology thanks for your report.

I can imagine it was difficult to trace the source of the issue back to the DOCTYPE declaration. I've just fixed the problem.

Essentially, some width, height css properties were being set without the respective units (px). This generally works fine in most browsers and thus remained undetected, but was causing an issue in Aframe (the VR framework) if the DOCTYPE was set to html, because it relies on monitoring the DOM properties in the background.

You can see the simple fix here: d84a7f2

So, if you upgrade to the latest version of this module you should no longer experience the issue.

micrology commented