Я делаю меню вне холста, и когда вы нажимаете на гамбургер, чтобы открыть меню, вы получаете мерцание.Если вы затем закроете меню холста и снова откроете его.Мерцания больше нет.Это также относится и к выпадающим спискам, которые есть у меня в меню offcanvas.
Это мой CSS для перехода offCanvas:
const OffcanvasContainer = styled(Container)`
width: 280px;
height: 100vh;
background: ${props => props.theme.offCanvasBackground};
box-shadow: 3px 0px 5px -2px rgba(0,0,0,0.25);
position: fixed;
top: 0;
left: -400px;
z-index: 10;
transition: left .25s;
${props => (props.open ? 'left: 0;' : null)}
`;
Следует отметить, что на самом деле открытая опора - это состояние, которое срабатывает при нажатии, код ниже:
openOffcanvas() {
this.setState({ open: !this.state.open });
}
<Offcanvas
open={this.state.open}
/>
Итак, я также попытался добавить эту строку css в тег body, поскольку я читал, что это может решить проблему, но это не так.
-webkit-transform:translate3d(0,0,0);
Мне любопытно, сталкивался ли кто-нибудь еще с этой проблемой и как ее исправить.
**** Обновить **** Если я добавлю задержку к переходу, это решит проблему.Поэтому, возможно, мне нужно дождаться загрузки данных компонента, прежде чем произойдет переход.
Теперь ищем предложения по вышеуказанному.