如何解决样式化的组件:Safari浏览器中的溢出功能无效
我正在使用React应用。对于样式,我使用styled-components。除了表格,我还有一个聊天选项。在我的Chorme Firefox中,我的聊天框看起来像这样:Chrome Image,而在Safari中,它看起来是这样的:Sarari image。我已经检查了很多类似的问题,例如解决方案。但是在styled-components中找不到任何解决方法。我尝试了其他stackoverflow解决方案,但无法修复。
这是我的聊天组件
return (
<div className={className}>
<div
className="comments-wrapper"
ref={commentWrapperEndRef}
>
{comments.length === 0 &&
<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;
&-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;
}
`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。