Help: FollowerAlert lagging with CSS

Hi There

I’m trying to integrate the CSS language (below) for FollowerAlert on OBS but there are two issues:

  1. CLR Browser only acknowledges CSS a few seconds after the banner appears. I.e. the default follower banner appears first and then, half way through the duration, it twitches and turns into the CSS banner
  2. The font does not change to the one I want

Can somebody please help me?

CSS:

/* latin */
@font-face {
font-family: ‘Sigmar One’;
font-style: normal;
font-weight: 400;
src: local(‘Sigmar One’), url(http://fonts.gstatic.com/s/sigmarone/v6/aRAZJs6CY7SV6eSg6Wx4jyEAvth_LlrfE80CYdSH47w.woff2) format(‘woff2’);
}

@-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
}

75% {
-webkit-transform: translate3d(0, 10px, 0);
}

90% {
-webkit-transform: translate3d(0, -5px, 0);
}

100% {
-webkit-transform: translate3d(0, 0, 0);
}
}

::-webkit-scrollbar {
visibility: hidden;
}

body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}

#follower-alert {
width: 580px !important;
height: 110px !important;
-webkit-animation-name: bounceInUp;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

#new-follower {
margin: 0px !important;
padding: 0px !important;
width: 463px !important;
position: absolute !important;
top: 59px !important;
left: 54px !important;
font-family: ‘Sigmar One’, cursive !important;
}

Exact same problem. It uses the default settings, has a scrollbar, and a second later it executes my commands.

Here is a video of what it’s doing;

The way CLR Browser implements CSS support in its newest version is by injecting it into the page after the page loads. This is probably also why it changes mid test. Unfortunately there’s nothing that can be done to fix this functionality.

So should we use an older version?

In the case I described, the preview wouldn’t work. Normal alerts should work fine.

Oh, ok. So when I preview the alert, it’s supposed to have the scroll bars and such?
But when somebody actually follows, it will look normal?

Either way, I switched to clrbrowser 3 and that seems to work OK.

This topic was automatically closed after 85 minutes. New replies are no longer allowed.