Размытость из-за пользовательских CSS (Semanti c UI React) - PullRequest
Новая
       3

Размытость из-за пользовательских CSS (Semanti c UI React)

0 голосов
/ 15 марта 2020

Я создал контейнер 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, чтобы сравнить его со страницей регистрации, которая является такой же, но без какого-либо компонента Layout вокруг нее.

Stackoverflow также снизил качество изображения, но разница все еще заметна:

enter image description here

В чем причина этого изменения резкости? Это изменение размера или скрытое свойство CSS? Есть ли способ решить эту проблему?

1 Ответ

0 голосов
/ 15 марта 2020

Хорошо, я пытался исключить каждое свойство css по одному. Кажется, размытие было вызвано свойством transform: translate(-50%, -50%). Без этого контент снова остается прежним, только не выровненным по центру, поэтому для этого нужен альтернативный путь.

У меня нет ответов на данный момент, почему перевод вызывает снижение резкости.

...