OBS Browser Source doesn't behave like streamlabs preview

[Velkas]

Ok, this might be a bit long winded but I'm hoping for some technical help here.

What I've found is that one of my streamlabs widgets with custom HTML/CSS/JS, ends up behaving differently from the website preview vs OBS as a browser source.

I'm using the streamlabs chatbox widget to get chat on screen in OBS. My goal is to have a dynamic chatlog that can display a background under the chat, per chat message, and then remove the row (and the background) once the message has reached its "hide chat after" threshold.

I tried to get support for this on Streamlabs' support channels but they don't support this kind of issue at all, so I'm coming here as a last resort, on the offchance that this is a bug with OBS Browser Source.

Now to the issue:
In Streamlabs via Firefox, I have setup my custom CSS/JS as follows:

#log {
    display: table;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px 2px;
    width: 100%;
    table-layout: fixed;
    background-color: rgba(0, 0, 0, 0.25);
    border-spacing: 0px;
    border-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#log>div {
    display: table-row;
}

#log>div.deleted {
    visibility: hidden;
}

let log;
const maxLogLength = 5;

document.addEventListener('onLoad', function (obj) {
  // this will fire only once when the page loads
  
  // get the log element and store it so everything can access it
  log = document.getElementById('log');
  
  // subscribe to the onanimationend event with custom cleanup code that will verify
  // that the animation is the outgoing type, and remove the specific triggering message
  // from the log in order to remove its display fully from the window instead of hiding
  // just the text and leaving the transparent background behind
  log.onanimationend = function(obj) { 
    // check the animation is the outgoing one
    if(obj.animationName === "fadeOutUp")
    {
      // get all the current HTMLCollection children and convert to array to find the message
      // index we need
      let arr = Array.from(log.children);
      let index = arr.findIndex(e => e.innerHTML === obj.srcElement.innerHTML);
      
      // remove the matching index from the collection
      log.children[index].remove();
    }
  };
});

document.addEventListener('onEventReceived', function (obj) {
  // fired whenever a new chat message comes in
  
  // check that the log (which includes this new message) is more than
  // our displayt threshold
  if (log.children.length > maxLogLength)
  {
    // remove the oldest entry in the log to make room for the new one
		log.children[0].remove();
  }
});

What I've done is define a custom background to the table display of the log. This ensures that if any message shows up, it will have a slightly transparent background in order for the white text of the message to have contrast with the underlying sources (i.e. game) and always be visible when the source behind it is showing predominantly light or dark colors where the chat is placed.

After this is setup, the custom JS handles the other feature I want: to only show a max of 5 log items at most (handled by the onEventReceived subscription) as well as to clear the given message from the log when it finishes its own outgoing animation (handled by subscribing a custom function to the log's onanimationend event).

Using this, I get very pleasing results in the preview on the web in firefox where this custom code is placed. Messages stream in and after their delay limit is reached, they perform their outgoing animation and my custom code fires and removes the message from the log, removing the entire row including its background. Additionally, when any new message comes in, if the log already contains 5 message, the oldest is removed successfully and the log does not continue to grow past this size. I can watch the preview all day and see that it's functioning 100% how I envisioned when I wrote and tested this code. I can watch in the inspector in real-time to see that the log is constantly expanding and shrinking in both cases of too many entries and when animations complete.

Then I take the widget URL and add it to OBS via a new Browser Source. I begin testing it by sending messages to my chat and I can see my own messages pop up successfully so I know the URL is correct. From there I can see that the custom CSS looks correct and how it was intended where the empty log shows nothing, the first new message will create a new row that has the defined table background, the font, sizes, spacing, et. al. look correct. So far so good. I send 5 more messages which would bring the total message count up to 6, to verify that the oldest message is removed. This also works as intended and the would-be 6th message is removed from the log and the background of the table is adjusted to fit the 5 max messages I defined. Excellent, things are looking great! Now to the last verification: when a message times out starts its fade, I see the message animation plays perfectly fine and I expect the next thing to happen is that the row is removed and the table background is adjusted again just like the 5 message limit described before this. However, the log background remains fully where it was. This is where I start to lose my ability to fix issues.

On one hand, I realize this is a rather specific issue and I really should be able to figure it out as I've figured everything out on my own to get to this point stating from very little CSS/JS experience. I used the inspector and logging to figure everything out so the hookups were working just right in the preview when I was developing this in firefox. But I can't use any sort of inspector on my browser source in OBS so I can't add logging or check what's happening when I'm finally testing in OBS.

So here I am, starting this discussion, hoping someone here can point me in the right direction. I'm totally willing to provide more details, please just ask.

Is there any way to inspect a browser source to view the web console, inspector, or style editor similar to firefox/chrome?

[WizardCM]

So, first - verify it behaves the way you want in Chrome, as OBS is currently based on Chrome 75.

Second, remove the built-in CSS in the Properties window for your browser source to make sure it's not messing with your code.

Third, yes you can open the OBS Chrome Dev tools like so:

Add --remote-debugging-port=1234 to your OBS Studio shortcut (where 1234 is your preferred port number) and navigate to http://localhost:1234/ in Chrome to connect to the session

[Velkas]

Thank you for the fast response! I will start troubleshooting with this additional info, thank you.

[Velkas]

Upon further investigation, it looks like OBS is not firing the attached events on the log object. I will need to verify behavior in chrome 75 later but for now, I can at least see via inspection where my code is and isn't firing.

[Velkas]

I have confirmed that the preview on Chrome 75 behaves like OBS Browser Source and thus, my custom code does not work for my purposes. That's a shame. By any chance do you know if OBS intends to upgrade its version soon? It seems like the latest version of Chrome and Firefox both successfully work (in the web preview at least) and so there must be some pretty big changes since Chrome 75.

[WizardCM]

You can find the latest here, but the gist is:

1. As of OBS 26.1.2, macOS is now based on Chrome 85
2. As of OBS 27, Linux will definitely be based on Chrome 87
3. If all goes according to plan, as of OBS 27, Windows will also be based on Chrome 85. This is not confirmed yet, and if it's delayed it'll likely be until OBS 27.1.

We're hoping to release the OBS 27 Beta sometime later this month.