Разное поведение и стиль для Safari - PullRequest
Новая
       16

Разное поведение и стиль для Safari

0 голосов
/ 08 марта 2019

Я работаю над приложением Gatsby, я добавил Fone Awesome Icon и стиль, но внешний вид для Safari другой.Иконка полностью потеряла форму и пропорции.

Safari

Safari

Google Chrome

Google Chrome

React 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDatabase } from '@fortawesome/free-solid-svg-icons'

<span className="awesome-parent">
  <FontAwesomeIcon 
    className="major db-style awesome-icon" 
    icon={faDatabase}
  />
</span>

Styling 

.awesome-parent {
  display: inline-flex;
  border: solid 1px;
  border-radius: 100%;
  margin: 0 0 2em;
  padding: 0.5em;
  border-color: lightgray;


  .awesome-icon {
    border: solid 1px;
    border-radius: 100%;
    height: 10em;
    width: 10em;
    padding: 2em;
  }

  .db-style {
    color: _palette(db-blue);
    border-color: lightgray;
  }

}

Может кто-нибудь заметить, что я сделал не так?Я хотел бы добавить, что у меня есть несколько других значков с точно таким же стилем, но другого цвета, и они ведут себя, как и ожидалось.

С уважением

1 Ответ

0 голосов
/ 19 марта 2019

Пожалуйста, измените border-radius: 100%; на значение в пикселях. Попробуйте border-radius: 25px; Я надеюсь, это поможет вам. Спасибо

...