title: Opacity change on button hovered glitch QML
body: <p>I have created a custom virtual keyboard where the components are buttons, whose attributes I have defined in the code below . When I rapidly move the mouse across the buttons, I find that there is a 'flashing' effect whereby the button opacity appears to momentarily drop to 0 and then return. How can I prevent this flashing effect?</p>
  <pre><code>import QtQuick 2.15
  import QtQuick.Controls 2.12
  import QtGraphicalEffects 1.0
  import &quot;definitions.js&quot; as Defs
  
  Button {
      id: keyboardButton
      property bool specialButton: false
  
      contentItem: Text {
          text: keyboardButton.text
          font.family: Defs.font
          font.pointSize: Defs.defaultTextSize
          color: Defs.ivory
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
          elide: Text.ElideRight
      }
  
      background: Rectangle {        
          id: background
          property double op: specialButton ? 0.7 : 0.5
          color: Defs.b_blue
          opacity: op
          radius: 0
  
          OpacityAnimator on opacity{
                          running: keyboardButton.hovered
                          from: background.opacity
                          to: background.op + 0.05
                          duration: 100
  
          }
          OpacityAnimator on opacity{
                          running: !keyboardButton.hovered
                          from: background.op + 0.05
                          to: background.op
                          duration: 100
          }
      }
  }
  
  
  
  
  </code></pre>