antd bug (fixed dosen't work with -webkit-transform)
position: fixed를 하여도 특정 블록에 속해있는 버그가 생겼다.
이는 antd card cover에 아래와 같이 transform의 유명한 버그라고 한다
.ant-card-bordered .ant-card-cover {
margin-right: -1px;
margin-left: -1px;
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
*/: ;
}
<style>
https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform
Positions fixed doesn't work when using -webkit-transform
I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user. In Firefox it works fine, but in webkit based
stackoverflow.com
위에 코드에서 -webkit-transform, transform을 주석처리하면 버그는 말끔히 해결된다.
해당 css코드에 styled-components의 createGlobalStyle을 이용하여 transform을 지우자.
const Global = createGlobalStyle`
.slick-slide{
display: inline-block;
}
.ant-card-cover {
transform: none !important;
}
`;
이러면 해결!
