自定义Input组件Loki截图测试失败，border-radius存在差异

我在自定义Input组件的Loki截图测试中始终失败，截图对比显示，无论如何调整测试用例，组件的border-radius都存在渲染差异（差异表现为圆角部分的显示不一致）。有时差异出现在Input的不同位置，但核心问题始终围绕border-radius展开。

Storybook 代码 #

export default {
  title: "shared/Input",
  component: Input,
  argTypes: {
    backgroundColor: { control: "color" },
  },
} as ComponentMeta<typeof Input>

const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />

export const Primary = Template.bind({})
Primary.args = {
  placeholder: "Type text",
  value: "123123",
}

export const WithoutPlaceholder = Template.bind({})
WithoutPlaceholder.args = {
  value: "123123",
}

Input 组件代码 #

export const Input = memo(
  ({
    className,
    value,
    onChange,
    type = "text",
    placeholder,
    placeholderInline = false,
    autofocus,
    ...otherProps
  }: InputProps) => {
    const ref = useRef<HTMLInputElement>(null)
    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
      onChange?.(e.target.value)
    }

    useEffect(() => {
      if (autofocus) {
        ref.current?.focus()
      }
    }, [autofocus])

    const mods: Record<string, boolean> = {
      [cls.placeholderInline]: placeholderInline,
    }

    return (
      <div className={classNames(cls.Input, mods, [className])}>
        {placeholder && <div className={cls.placeholder}>{placeholder}</div>}
        <input
          ref={ref}
          type={type}
          value={value}
          onChange={onChangeHandler}
          className={cls.input}
          {...otherProps}
        />
      </div>
    )
  }
)

SCSS 样式代码 #

.input {
  width: 100%;
  background: var(--bg-color);
  border: none;
  border: 1.5px solid var(--primary-color);
  border-radius: 5px;
  color: var(--primary-color);

  &:focus {
    outline: 1.5px solid var(--inverted-primary-color);
  }
}

.placeholderInline {
  display: flex;
  margin-right: 5px;
}

我已经排查过Storybook和Loki的配置，但未找到问题根源。

内容的提问来源于stack exchange，提问作者DmoJK