Unity3D web player is disappears when Facebook chat window is active

News & General Discussion
1

Hi all,

We have uploaded a game on Facebook and we are noticing that whenever we open the chat window, the web player simply disappears. You can try this by navigating to the following link https://apps.facebook.com/kringlukross/?fb_source=search&ref=ts&fref=ts and then open a chat window. Is there a way to get around this?

Regards,
Clayton

2

Ha! Kringlan! Haven’t been there in a while :slight_smile:

I suspect that is a FB issue and how they handle the chat window. Might be a shot in the dark but have you tried enabling “Run in background” in the player settings? This might have some downsides on your game should people expect it to not run in the background.

3

Thanks for replying.

Haven’t tried that yet… but I don’t want the game to keep on running whilst it is in the background. I will make a build and see what happens, just in case.

Regards,
Clayton

4

I too have encountered the same issue and have noticed it to happen with any of the drop menus on FaceBook
I have “Run In Background” enabled however the issue still occurs
I would be very grateful for any advice or pointers on how I may fix or if not work around the issue, if there is any way around it

Thanks

5

claytoncurmi

i see you have fixed your problem could you share your solution? I’m struggling with this one too

thanks!

6

Solved it. I know web player is about to die and probably no one is going to see this but still, if you are having the same problem here you go:

The core of the problem was that opening the facebook chat was changing the style of my html elements, I have no clue why. So what I did was add a listener to the html style changes via javascript plugin. Huge thanks to this guy: javascript - Is it possible to listen to a "style change" event? - Stack Overflow

What Was Happening:
I’m using google developer tools. What I found is that opening the chat was changing unity’s inline css here inside the facebook canvas, it was setting the width and height to -10000px (the image is already from the fixed version):

How To Solve It:
After following the upper mentioned stackoverflow answer I created an observer to hard reset the css if it’s ever changed. This is the code I added in my javascript plugin:

function FixFBWebPlayerAnomaly(){
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutationRecord) {
            var _webPlayer = document.getElementById('unityPlayer').firstChild;

            if(_webPlayer.style.cssText != "display: block; width: 435px; height: 700px;"){
                _webPlayer.style.cssText = "display: block; width: 435px; height: 700px;";
            }
        });
    });

    var target = document.getElementById('unityPlayer').firstChild;
    observer.observe(target, { attributes : true, attributeFilter : ['style'] });
}

call this method from your game at the very start with Application.ExternalCall(). If you call it from the plugin side it may be too early, the webplayer element may not be created yet.

Hope this helps someone before the webplayer is finally sent to the void.