Question / Help CSS Flicker when browser source loads

[Michael Berry]

I'm trying to use the browser source to show "lower thirds" on my stream. I found some sample CSS animations that I would like to start working with. What is happening though is that the browser source is flashing the whole web page up on screen before the animations begin. I originally posted this under the crazy long plugin thread, but I'm wondering if anyone else experiences these issues?

https://codepen.io/mattchestnut/pen/dMrONe

And here is a link to a video I recorded in OBS that shows the behavior:

https://www.dropbox.com/s/tyrzh1comnvxutv/2017-08-30 07-52-24.mp4?dl=0

When I load the page in Chrome, I don't have these issues. I'm not sure if it is a bug, and is there a workaround where I could add some code to keep things hidden for a second when the page loads?

I originally posted this under the crazy long plugin thread, but I'm wondering if anyone else experiences these issues? Another user posted a video back showing that the problem didn't occur on his machine. I installed on a new streaming pc and then tested, and I also no longer had the problem. But today, the problem is back on that pc also. Maybe I somehow changed something on that pc, but I have no idea where to even look.

Is there another version of the plugin I could install, some CSS magic I could use to hide this flicker?

OBS 20.0.1 x64
Running on Windows 10
Here is a link to my log file:
https://gist.github.com/a03a60e6dbac4ae856e5fc9401024925

 

[Osiris]

Are you putting the CSS in the CSS field in the browser plugin? If so, don't. Put it in the actual page.

 

[Michael Berry]

Are you putting the CSS in the CSS field in the browser plugin? If so, don't. Put it in the actual page.

The CSS is in the actual page. I had left the default CSS info in the box when I setup the browser source. I tried deleting that and it didn't make a difference either. I'm just pretty much using their package as downloaded and opening up the .html file in the browser source.