Bug 119139 – Graphical Error on :hover on input element with border-radius (Blue => Orange)

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

[Shaun Merchant]

Created attachment 207518 [details]
Normal State

Input buttons have the following CSS applied to them:

input[type="submit"] {
    color: #FFF;
    padding: 10px 20px;
    background: #025c88;
    border: none;
    border-radius: 5px;
    -webkit-transition: all 0.5s;
}
input[type="submit"]:hover, input[type="submit"]:active {
    background: #c78c06;
}

When they enter the :hover state, there is a distortion around the border. This does not occur when border-radius at 0px, or when "border : none" is removed.
When -webkit-transition is removed, there is slight distortion on the border, which proceeds to get worse the more times it enters and exits the :hover state.

Steps to Reproduce:
1. Visit the attached .html document
2. Hover over the input button

Actual Result:
There's a distorted border

Expected Result:
It looks fine and dandy.

.. Did I just pick the wrong colour scheme?

[Ahmad Saleem]

I am not able to reproduce this bug in Safari 16.1 using attached test case while zoomed in to see if the borders are distorted but it was not the case.

It is matching with Chrome Canary 109 and Firefox Nightly 108.

I am going to mark this as "RESOLVED CONFIGURATION CHANGED", please reopen if it is reproducible with updated test case.