With dark theme some textboxes flash white every second

[Harvester62]

Hi, I've just installed your Extension to localize it's interface in Italian Language, and I like it. There is only an issue: I use the dark theme for the SD Web UI and the following info boxes flash white intermittently every second, which is a little disturbing especially with a dark theme: State, Memory, time, and Object Info.

[Harvester62]

Hmmm, it's not your Extension's fault, really, but the Gradio in general doing that flashing, because it happens sometimes even inside other extension's tabs. Perhaps it's a limitation of the Gradio Web UI in general.

[vladmandic]

i was just writting the same thing - unfortunately, that is how gradio updates text-boxes - seems very suboptimal, but nothing i can do about it other than implement my totally custom boxes in javascript and not use gradio, but its just not worth it.

[Harvester62]

No problem @vladmandic I don't think you should spend you time to fix something that is not your fault. That should be done a the Gradio level, perhaps keeping or using the dark theme background color as the background at flash time, but I am not a programmer, so probably I don't even know what I'm talking about.

[vladmandic]

i'll take a look if anything can be done perhaps on css level...

[Nacurutu]

Just in case, I got rid of the flashing in all of the webUI, including the system info tab using this in my user.css file:

/*Css hide Gradio text, progress bar and animations*/
/*----------------------------------------------------------------*/
* .wrap.m-12, 
* .wrap.z-20,
* .meta-text-center, 
* .meta-text,
* .wrap.m-12 svg, 
* .wrap.z-20 svg,
* .wrap.svelte-5usjvi {
  display:none ;
  inset: 100% ;
} 

Also, to just return the progress bar to the model's dropdown selector when u load a model:

#setting_sd_model_checkpoint .wrap.svelte-5usjvi {
  inset: 0 ;
  display: flex;
  justify-content: center;
  color: var(--Input_text_color);
} 

And, to avoid the blink in the progress bars, I took this from somewhere in the webUI code, don't remember where, but I also have add it to my CSS file

/* gradio 3.8 adds opacity to progressbar which makes it blink; disable it here */
.dark .transition.opacity-20 {
  opacity: 1 ;
}

[Harvester62]

I've just added all three above mentioned code snippets of yours into my user.css file, and the flickering is gone. Thank you!

May I suggest you to open a Bug Report or start a Discussion to submit your code to Automatic1111 as a fix to the flickering? There is no warranty that it might be accepted or integrated but at least the users might find it researching inside the repository and apply the snippets manually into their user.css file. I need to keep a copy of your snippets in case the user.css file is overwritten by a git pull in future. Thanks again @Nacurutu

[vladmandic]

only problem is that identifier .wrap.svelte-5usjvi is dynamically created, so any future updates of webui ui components may cause gradio to change it.

[Harvester62]

It implies that even the currently working solution might no longer work after a future update? If this is the case, can that specific identifier be updated with the new one? I mean, keeping track of that identifier in future updates.

[vladmandic]

correct - need to find a better css selector, but nothing obvious comes to mind, likely needs to be added to webui so it can be identified using static name instead of dynamically created one.

[Harvester62]

In fact, what I was suggesting previously, was to let Automatic1111 know about this so that it might consider to patch his Web UI. But it is up to him and the other developers to evaluate and implement this correction inside SD Web UI.

[vladmandic]

too a second look at this... every gradio uses svelte framework. and every gradio component goes through transition when updating - it draws a progress bar over the component. typically, those transitions are so fast that they are invisible, but for larger components, you start seeing flickering.

to me, this seems like a massive overkill for the ui - i don't want every text box in the entire ui to go through animations all the time, it does have significant performance impact on the browser itself.

so a simple hack:

.eta-bar { display: none !important }

[Harvester62]

What should I do? Where should I insert that code? What should I keep and what should I delete? This is my current user.css file content:

Thank you.

[vladmandic]

.eta-bar { display: none !important }

is a global disable of the gradio progress bars (other than main one as that is custom rendered) so if you use this, nothing else matters.

[Harvester62]

So, your above referenced line of code for Gradio would supersede all the configuration code inside my user.css reported previously, which can then be removed from it? In the affirmative, I still don't know "where" should I insert your global disable code, inside which file in the SD Web UI installation directory. Could you provide more detailed instructions, please? I have no knowledge of Gradio language and file structure, that's why I am asking you. Thank you for your patience.

[vladmandic]

this is just a line in user.css. and yes, if you want to use it, you can remove all other lines as this works on higher level.