28

This is what the search bar on the main site looks like for me after the recent redesign:

A picture of a search bar. It says "Powered by AI" and that flashes.

This is really distracting to me. It keeps flashing until I click to acknowledge it. That stops it from flashing, until the next time I open SO. I've already dismissed it three times.

Can we have an option to permanently turn off the flashing notification? Alternatively, does anyone have a userscript to turn it off?

22
  • 4
    "Can we have an option to permanently turn off the flashing notification" Disable OverflowAI search from your preferences? :P Oct 20 at 5:15
  • 6
    @Abdul You may joke, but that's exactly what I did when I first noticed this. Fun thing, you can't just turn it back on, you have to wait in the queue again to get access to the feature.
    – Erik A
    Oct 20 at 6:47
  • 8
    There is a reason why the blink html tag became obsolete, because it is really, really annoying. What were they thinking?
    – Gimby
    Oct 20 at 7:22
  • 1
    Maybe that's what the AI does - changes the color for maximum annoyance. Then when the AI has concluded which color scheme that's the maximum annoyance and caused most people to opt of it, they launch that color scheme network-wide... There are many great projects going on at SO right now.
    – Lundin
    Oct 20 at 8:50
  • 2
    @ErikA huh >:( that's not what I was told... either I was misled, or someone didn't understand my question.
    – starball
    Oct 20 at 9:56
  • Sadly, SO constantly makes the site more annoying for users without any option to customize it
    – Konrad
    Oct 20 at 11:21
  • @starball I'm not sure that applies, I opted in via the settings menu as described here, not via the form linked on that question.
    – Erik A
    Oct 20 at 12:18
  • 6
    Hello, the animation is intended to only appear until you've interacted with or performed a search once. After that, the pulse should not re-appear again so this appears to be a bug that I went ahead and ticketed for investigation. Apologies for the inconvenience. Will report back when it's been addressed.
    – tanj92 Staff
    Oct 20 at 15:13
  • 1
    You're welcome, I was able to reproduce it on my end since I had interacted with the search bar a few times yesterday and it re-appeared when I visited the homepage this morning. By chance, were you on a MacOS machine when this occurred?
    – tanj92 Staff
    Oct 20 at 15:24
  • 1
    @NickODell Thanks! That could be the common denominator but won't know until we investigate some more.
    – tanj92 Staff
    Oct 20 at 16:40
  • 7
    @ShadowWizardIsSadAndAngry A bug in an opt-in feature is still a bug, isn't it? Oct 20 at 23:25
  • 4
    @NickODell we've made a change this morning. Can you let me know if you're still seeing the animation re-appear later today?
    – tanj92 Staff
    Oct 26 at 17:41
  • 2
    Sounds good, if anyone else is also having issues with this re-appearing after deploying this change, please ping me. Thanks!
    – tanj92 Staff
    Oct 26 at 19:32
  • 3
    I logged on this morning and did not see the animation re-appear so I'll be updating the tag to status-completed for now. Let me know if it re-appears for you, thank you!
    – tanj92 Staff
    Oct 27 at 15:30
  • 2
    @tanj92 Sounds good - I haven't seen it in the last 24 hours.
    – Nick ODell
    Oct 27 at 15:50

2 Answers 2

8

I haven't opted in to enable OverflowAI search, but I do see some inline CSS with classes like js-search-pulsing, etc. that seem to do this.

This seems to (at least currently) be the only style tag in the head tag. So you could create a userscript that runs document.querySelectorAll("head style")[0].remove() to remove that CSS and hence remove the flashing.

2
5

Here's the rule I'm using:

.js-input-border-pulsing, .js-search-pulsing, .js-text-pulsing {
  animation: none !important;
}

These classes are taken from this stylesheet, which should be somewhere in your <head>:

<style type="text/css">.js-alpha-search-label { color: hsl(210, 8%, 75%); }.js-search-pulsing { border-radius: 8px; border: 2px solid transparent; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; outline: 0 }@-webkit-keyframes pulse { from { border-color: transparent; } 50% { border-color: hsl(206, 93%, 83.5%); } to { border-color: transparent }}@keyframes pulse { from { border-color: transparent; } 50% { border-color: hsl(206, 93%, 83.5%); } to { border-color: transparent }}.js-input-border-pulsing { animation: blink 2s infinite; outline: 0; -webkit-animation: blink 2s infinite; outline: 0 }@-webkit-keyframes blink { from { border-color: hsl(210, 8%, 75%); } 50% { border-color: hsl(206, 93%, 83.5%); } to { border-color: hsl(210, 8%, 75%); }}@keyframes blink { from { border-color: hsl(210, 8%, 75%); } 50% { border-color: hsl(206, 93%, 83.5%); } to { border-color: hsl(210, 8%, 75%); }}.js-text-pulsing { color: hsl(210, 8%, 75%); animation: color-change 2s infinite; -webkit-animation: color-change 2s infinite; }@-webkit-keyframes color-change { from { color: hsl(210, 8%, 75%); } 50% { color: hsl(206, 100%, 52%); } to { color: hsl(210, 8%, 75%); }}@keyframes color-change { from { color: hsl(210, 8%, 75%); } 50% { color: hsl(206, 100%, 52%); } to { color: hsl(210, 8%, 75%); }}</style>

Apply this rule with an extension of your choice. For me, a Chrome user, it's Stylus.

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .