HTMLViewer - button animation causes entire page to shake. How to troubleshoot?

General
1

My desktop app primarily uses HTMLViewers for its user interface and I have just started to observe some odd behaviour. I recently upgraded to a M1 Macbook Pro (MacOS Monterey 12.1) and am using Xojo 2021r3.1. This issue did not occur on my old 2015 Macbook running Mojave. One of the displayed pages in my app now shakes when the mouse hovers over a button.

I have been able to isolate the cause as the css box-shadow animation for the buttons:

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    border-radius: 0.3em;
    color: white;
    padding: 0.125em 0em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.8em;
    margin: 0.125em 0.125em;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 2.0em;
}
.button:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

If I comment out the .button:hover entry then the shaking does not occur.

What is more bizarre is that

  1. It only happens on one page in my app, whereas on other pages which contain the same css animation, it does not
  2. Initially, when I opened the local source html file in Safari, the shaking also occurred, but did not occur if opened in Firefox
  3. After I rebooted by laptop, the shaking no longer occurs in Safari, but still does when displayed in my app!

This is a link to a 2 sec video showing the issue (260kB)
https://www.dropbox.com/s/v9wysxk8g90vmm7/Shake%20example.mp4?dl=0

This is the html file that is causing the issue. The offending css is on line 490.
https://www.dropbox.com/s/19eu17k4y5m2urk/TempSAQPaper.html?dl=0

This html file does not have the shaking issue, even though the css is the same
https://www.dropbox.com/s/yx6o56fy4j3efor/TempListLayout.html?dl=0

I can simply remove the shadow-box animation to work around this problem – though I’d rather not, as I quite like how it looks. Would anyone have any suggestions as to the root cause of what’s happening? The occurrence is so inconsistent, I can’t tell whether it’s related to me upgrading to Xojo 2021r3.1, upgrading to Monterey or to my new ARM M1 Mac… 😵‍💫

If anyone has any bright ideas on how to troubleshoot, it would be much appreciated!
Cheers,
Frank