[SOLVED-ish] add_iframe - iframe has border around it when interacting with it in Chrome and Edge - way to get rid of?

Hi all,

I have been using the add_iframe action successfully to add HTML content to my scene. Works great.

https://krpano.com/forum/wbb/inde…&threadID=12516

<action name="add_iframe" type="Javascript">
    		var iframe = document.createElement("iframe");


    		iframe.style.position = "absolute";
    		iframe.style.left = 0;
    		iframe.style.top = 0;
    		iframe.style.width = "100%";
    		iframe.style.height = "100%";
    		iframe.style.border = 0;
    		iframe.style.outline = "none";
    		iframe.src = args[1];


    		caller.registercontentsize(args[2], args[3]);
    		caller.sprite.appendChild(iframe);
    	</action>

However, in Chrome and Edge whenever I click on the hotspot to interact with the web content I get a thin black border around it. On mac my co-worker is getting a blue border. In Firefox neither of us get a border at all.

I have tried many different permutations of CSS

outline: none !important;

with no success.

Has anyone else come across this and found a way around this border issue?

When I click on and interact with the HTML content the border appears. When I click outside of the HTML and drag the pano the border disappears.

Any insight or help would be greatly appreciated.

Thank you!

I just want to reply to my own thread here.

I got tired of messing with the iframe (and other derivatives) and decided to append the entire HTML string to the hotspot instead of appending the iframe and then setting its src.

To do this I tested two use cases:

1) You can write out the entire HTML string within your JS and then use something like insertAdjacentHTML().

2) Or, you can have a complete HTML structure in a separate file and load it via some ajax. I chose to use jQuery load().

Both use cases work perfectly and ultimately get around any nuances of iframes and the such. And, I assume also gets around any deeper cross browser and/or device issues.

I could see no noticeable performance issues on either. Although my test html structure was not very complicated.

Thanks!

Hi Klaus,

Upon further investigation, you are absolutely correct. The focus outline comes from the content not the iframe.

I am using this library to include a 3d model:
https://modelviewer.dev/

Here is the issue and the process to successfully get rid of the border:
https://github.com/google/model-viewer/issues/1720

What led me down the wrong path was, I do not see this border in FF or Safari as reported.

And, what is even more perplexing, is that if I do NOT use an iframe (as I detailed above) the focus border does NOT display and I am NOT applying their fix. That is weird. I do not know what is different between displaying the content via iframe (and seeing the focus border) and displaying the content via raw html string (and not seeing the focus border).

That is definitely weird and not expected.

Just to be safe, I have included their javascript fix and I have seen no ill effects within krpano.
Thanks!