Chrome 输入自动填充值没有在用户输入时获得过渡样式

如何解决Chrome 输入自动填充值没有在用户输入时获得过渡样式

在我创建的表单中，我在有焦点时设置样式，输入 font-size 增加，没有焦点时，输入 1s transition 减少。

当自动完成值时，我使用来自 styling the filled value 和 styling the input background 的帖子中的有价值的提示来设置自动完成值的样式。

但是当输入被自动完成填充并且没有焦点时，font-size 会减少但过渡不起作用。

虽然它在 Mozilla 中按预期工作。

这里是css

//basic input style

input {
    background-color: inherit;
    border: none;
    caret-color: red;
    color: red;
    transition: font-size 1s;
    font-size: 1rem;
}


//auto fill input background

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-Box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: white !important;
    -webkit-background-size: 0;
    -webkit-border-radius: 0;
}


//increase autofill value font-size when selecting the value

input:-webkit-autofill:focus::first-line {
    font-size: 2rem;
    font-family: 'Roboto',sans-serif !important;
}


//decrease autofill value font-size when no focus

input:-webkit-autofill:not(:focus)::first-line {
    font-size: 1rem;
}

如果您没有明白我的错误是什么，我添加了 Mozilla expected behavior 和 Chrome behavior。抱歉提供链接，我的 gif 太大，无法在此处上传。

谁能指出正确的代码，我很感激。