Блог

Я использую приложение React. Для стилизации я использую styled-components. У меня есть один вариант чата помимо моей формы. Мое окно чата выглядит так в моем Chorme, Firefox: изображение Chrome, но в Safari оно выглядит так: Изображение Сарари. Я проверил множество подобных проблем, подобных этой, а также решение. Но нигде не нашел, как это исправить в styled-components. Я пробовал другое решение stackoverflow, но не смог это исправить.

Это мой компонент чата

 return (
    <div className={className}>
      <div
        className="comments-wrapper"
        ref={commentWrapperEndRef}
      >
        {comments.length === 0 amp;amp;
          <NoCommentsPlaceholder>
            {t(`noCommentsMessage`)} <br />
            {t(`startDiscussionMessage`)}
          </NoCommentsPlaceholder>
        }
        {formattedComments}
      </div>
      <IssueCommentForm
        issueUUID={issueUUID}
        ref={commentFormRef}
      />
    </div>
  );
})`
  @keyframes portal-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  background-color: #fff;
  position: relative;
  animation: portal-fade-in 250ms ease forwards 1500ms;
  opacity: 0;
  amp;-loader {
    position: absolute;
    top: 0;
    right:0;
    left:0;
    bottom: 0;
    background-color: red;
    z-index: 2;
  }
  .comments-wrapper {
   overflow: hidden; ## THIS DOES NOT WORK IN SAFARI
   overflow-y: auto; ## THIS DOES NOT WORK IN SAFARI
   padding: 20px;
  flex: 1 1 50px;
   width: 100%;
  position: relative;
  z-index: 1;

  }
 
`;