I had this pesky CSS bug where the search toggle SVG would just wobble on hover.

Side note: Why are SVGs so complicated to work with? (Skill Issues, Obviously)

The only way I found was to use the will-change: opacity value which tells the browser to pre-compute the layout separately, avoiding reflows during transitions..

/* Search toggle button */
#search-toggle {
  color: $default-color;
  margin-left: 2px;
  align-items: center;
  vertical-align: middle;
  will-change: opacity; //fixes the wobble of the svg

  @media (prefers-color-scheme: dark) {
    color: $default-color-dark;
  }
}

Also, per css-tricks:

It’s important not to overuse the will-change property however since it might, in fact, cause the page to be less performant (note that there is not an all value for this property for a good reason). As a result, MDN recommends that the property be used as a last resort for existing performance issues rather than ones you anticipate could happen.