由于自定义 CSS（语义 UI React）造成的模糊

Question

我已经为我的登录页面创建了一个 LoginLayout 容器：

class LoginLayout extends Component {
  render() {
    return (
      <div className="auth-main">
        <div class="auth-content">
          <div className="auth-card">
            <img src={logo} alt="Logo" className="auth-logo" />
            <Header as="h2" color="black" textAlign="center">
              {this.props.header}
            </Header>
            <Form.Group size="large" className="auth-form" autocomplete="off">
              {this.props.children}
            </Form.Group>
          </div>
        </div>
      </div>
    )
  }
}

这是它的 .css 文件：

.auth-main {
    background-color: #ffffff;
}

.auth-content {
    left: 50%;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

.auth-card {
    border-radius: 1%;
    min-width: 300px;
}

.auth-logo {
    width : 75%;
    margin: 5%
}

.auth-form {
    margin: 10%;
}

这就是我在 LoginLayout:

中嵌套登录表单的方式

return (
    <div>
      <LoginLayout header="Sign up to get started">
        <Form onSubmit={postLogin}>
          <Form.Input
          ...
      </LoginLayout>

结果元素定位很好，但内容的整体清晰度似乎降低了。

我打开了另一个 Chrome window 以将其与注册页面进行比较，该页面相同但周围没有任何布局组件。

Whosebug 也降低了图像质量，但差异仍然很明显：

这种清晰度变化背后的原因是什么？是调整大小还是一些隐藏的 CSS 属性？有什么办法可以解决这个问题吗？

Answer 1

好的，我已经尝试一一排除所有 css 属性。看起来模糊是由 transform: translate(-50%, -50%) 属性引起的。没有它，内容又和以前一样，只是没有与中心对齐，所以需要另一种方法。

我目前无法回答为什么翻译会导致清晰度降低。

由于自定义 CSS（语义 UI React）造成的模糊

Blurriness because of custom CSS (Semantic UI React)

css

reactjs

semantic-ui-react