Flickering on items with scrolling text enabled

[OneComputerGuy]

Sometimes (around 40% of the time) I get a weird flickering on items that have scrolling text such as the battery item or the Now Playing item I have.

A restart of the bar clears it most of the time but sometimes it sticks.

Video of the issue:

https://github.com/FelixKratz/SketchyBar/assets/44152511/557ea34e-3c36-43cf-8e4e-0299adacb512

The item file has this:

#!/bin/zsh

sketchybar --add item battery right \
            --set battery label.font.size=13.0 \
                                script="$PLUGIN_DIR/battery.sh" \
                                update_freq=120 \
            --subscribe battery system_woke power_source_change

and the plugin file has the following:

#!/bin/sh

PERCENTAGE=$(pmset -g batt | grep -Eo "\d+%" | cut -d% -f1)
TIME_LEFT=$(pmset -g batt | grep -Eo "\d+:\d+")
CHARGING=$(pmset -g batt | grep 'AC Power')
CALCULATED_TIME="..."

if [ $PERCENTAGE = "" ]; then
  exit 0
fi

case ${PERCENTAGE} in
  9[0-9]|100) ICON="􀛨"
  ;;
  [6-8][0-9]) ICON="􀺸"
  ;;
  [3-5][0-9]) ICON="􀺶"
  ;;
  [1-2][0-9]) ICON="􀛩"
  ;;
  *) ICON="􀛪"
esac

if [[ $CHARGING != "" ]]; then
  ICON="􀢋"
fi

if [[ -z $TIME_LEFT  ]]; then
  echo "Remaining time: $TIME_LEFT"
  TIME_LABEL="--:--"
else
  TIME_LABEL=$TIME_LEFT
fi

sketchybar --set $NAME label.width=42 label.max_chars=5 scroll_texts=true label.align=center icon="$ICON" label="$TIME_LABEL       $PERCENTAGE%"

The bar has the following styles and settings:

BAR_STYLES_BOTTOM=(
  position=bottom
  sticky=off
  topmost=window
  height=40
  blur_radius=30
  padding_left=10
  padding_right=10
  color=$BAR_COLOR
)

[OneComputerGuy]

One thing to add is that I've tried without the sticky option and sometimes I get the same behavior

[FelixKratz]

I am not able to reproduce on macOS sonoma with this minimal config:

sketchybarrc

#!/bin/zsh

SCRIPT='
#!/bin/sh

PERCENTAGE=$(pmset -g batt | grep -Eo "\d+%" | cut -d% -f1)
TIME_LEFT=$(pmset -g batt | grep -Eo "\d+:\d+")
CHARGING=$(pmset -g batt | grep "AC Power")
CALCULATED_TIME="..."

if [ $PERCENTAGE = "" ]; then
  exit 0
fi

case ${PERCENTAGE} in
  9[0-9]|100) ICON="􀛨"
  ;;
  [6-8][0-9]) ICON="􀺸"
  ;;
  [3-5][0-9]) ICON="􀺶"
  ;;
  [1-2][0-9]) ICON="􀛩"
  ;;
  *) ICON="􀛪"
esac

if [[ $CHARGING != "" ]]; then
  ICON="􀢋"
fi

if [[ -z $TIME_LEFT  ]]; then
  echo "Remaining time: $TIME_LEFT"
  TIME_LABEL="--:--"
else
  TIME_LABEL=$TIME_LEFT
fi

sketchybar --set $NAME label.width=42 label.max_chars=5 scroll_texts=true label.align=center icon="$ICON" label="$TIME_LABEL       $PERCENTAGE%"
'

sketchybar --bar color=0xff000000 sticky=off topmost=window

sketchybar --add item battery right \
            --set battery label.font.size=13.0 \
                                script="$SCRIPT" \
                                update_freq=120 \
            --subscribe battery system_woke power_source_change

sketchybar --update

could you confirm that it happens with this exact config as well? Which macOS version are you running?

[OneComputerGuy]

I've changed the config and will run it for a while to see if I get the same behavior. As for the macOS version, I'm running Sonoma, version 14.3.1 with 16Gb of RAM.

Not sure if relevant, but I switch regularly between a 4k monitor with the MacBook in clamshell mode and the laptop built-in monitor. I got the same behavior in both, but not sure if the change of displays could be triggering something else.

[OneComputerGuy]

Bit of an update, I ran the config you posted @FelixKratz and I'm not seeing any other glitch which is good, however, I kinda know now where the issue might be coming from.

I've modified the config file you posted and changed the font.size property to this:

--set battery label.font="Fredoka:Regular:13.0"

With that modification, the issue started again (not immediately but after a few hours of work). Fredoka is this Google Font but I've got this issue also with fonts from NerdFonts.

Home that helps to scope the issue a bit more

[Nikolaidp24]

I noticed the same thing happening with my music item as well, and I use OperatorMono Nerd Font. Also the texts sometimes seem a bit laggy when it's not flickering.

[OneComputerGuy]

I got more replication info today. I was able to get the same behavior with a stripped down version of the config I had (only the item without styles) and I was able to get the same behavior.

For this replication, I was able to remove the background, font, and styles from the item, was able to leave only the battery indicator. The only thing I wasn't able to get was to put the bar completely black, not sure if the transparency of the bar is what causing the issue

One thing I noticed right away is that the issue was more noticeable when the bar had position=bottom instead of on the top as seen in this video (around 2 out of 10 times was visible on the top instead of the 7/10 on the bottom):

https://github.com/FelixKratz/SketchyBar/assets/44152511/91adbea8-84d6-4108-9945-791dba18ebd2

[OneComputerGuy]

And tinkering again, I got the same behavior using the config file you posted initially below (adding the position bottom to the bar though). This is the video:

With custom font

https://github.com/FelixKratz/SketchyBar/assets/44152511/90d1c4d9-d30e-4d78-9e40-089f40318130

Without custom font:

https://github.com/FelixKratz/SketchyBar/assets/44152511/66a9840e-aca3-4bd9-bd8b-20fc82eb17bc

I am not able to reproduce on macOS sonoma with this minimal config:

sketchybarrc

#!/bin/zsh

SCRIPT='
#!/bin/sh

PERCENTAGE=$(pmset -g batt | grep -Eo "\d+%" | cut -d% -f1)
TIME_LEFT=$(pmset -g batt | grep -Eo "\d+:\d+")
CHARGING=$(pmset -g batt | grep "AC Power")
CALCULATED_TIME="..."

if [ $PERCENTAGE = "" ]; then
  exit 0
fi

case ${PERCENTAGE} in
  9[0-9]|100) ICON="􀛨"
  ;;
  [6-8][0-9]) ICON="􀺸"
  ;;
  [3-5][0-9]) ICON="􀺶"
  ;;
  [1-2][0-9]) ICON="􀛩"
  ;;
  *) ICON="􀛪"
esac

if [[ $CHARGING != "" ]]; then
  ICON="􀢋"
fi

if [[ -z $TIME_LEFT  ]]; then
  echo "Remaining time: $TIME_LEFT"
  TIME_LABEL="--:--"
else
  TIME_LABEL=$TIME_LEFT
fi

sketchybar --set $NAME label.width=42 label.max_chars=5 scroll_texts=true label.align=center icon="$ICON" label="$TIME_LABEL       $PERCENTAGE%"
'

sketchybar --bar color=0xff000000 sticky=off topmost=window

sketchybar --add item battery right \
            --set battery label.font.size=13.0 \
                                script="$SCRIPT" \
                                update_freq=120 \
            --subscribe battery system_woke power_source_change

sketchybar --update

could you confirm that it happens with this exact config as well? Which macOS version are you running?

[FelixKratz]

Could you try with current master? I think I know why this was happening now:

brew uninstall sketchybar
brew install sketchybar --head
brew services restart sketchybar

and then to go back to latest stable release use:

brew uninstall sketchybar
brew install sketchybar
brew services restart sketchybar

My hypthesis would also explain why it is font and position dependent and why I was not able to reproduce it. Because I can still not reproduce it, please confirm if it worked.

[OneComputerGuy]

I performed the steps to remove and install from head but unfortunately, the issue still exists.

Funny thing, I can see it flicker on my screen but when I try to record it using cmd+shift+5, the bar doesn't do it anymore and works as expected fow a while