Accessibility-insights-web: Jerky Dialog Box

[mgifford]

Describe the bug

For some links the dialog box jitters in a way which could cause people with epilepsy problems. I'm not sure why it is flickering like this. The screenshot doesn't demonstrate it but the video does.

To Reproduce

I'm having this issue on the second color contrast link on https://tastybackend.com/

Chrome, MacOSX.

Expected behavior

It shouldn't flicker.

Screenshots

https://drive.google.com/file/d/1CmPOQ9byiIr2471KjCovNJiUwP0bsJDK/view

[msft-github-bot]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[dbjorge]

Thanks very much for this report! We've been able to reproduce and root cause this; it's caused by a particularly bad conflict between the target page's CSS and our dialog's. The target page here is applying a "border: 3px" to all hovered buttons but not unhovered buttons; the extra 6px ends up re-flowing the row of 3 buttons at smaller screen widths, and the re-flow happens in such a way that if your mouse is positioned right, it can move the button out from under the mouse, resulting in a back-and-forth flickering of reflowing.

We'll release a fix for this right away that:

• Suppresses border styling from applying to the dialog's buttons
• Slightly increases the minimum width of the dialog, to make it less likely to see this sort of reflow in the case that a target page happens to introduce some other type of small width bump

[dbjorge]

Fix is available in Canary build 2019.4.22.2339. It will go out to production with our next release train.

[ferBonnin]

Hi @mgifford the fix for this is now in Production build version 2.3.0 :)