Reactjs - setState() make all texts of apps flickering - reactjs

Question

In component A, I got some setState functions to update states when clicking on some element. What strange happens is that all texts of the whole app flicked. Component A is completed isolated from others. This only happens on Chrome, firefox works just fine :( please help
My MenuButton component code :
import React, { Component } from 'react';
import styled, { css } from 'styled-components';
const InsideLineCommon = styled.span`
position: absolute;
width: 100%;
height: 100%;
left: 0%;
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: ${props => props.theme.colors.primary1};
}
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: ${props => props.theme.colors.primary1};
}
`;
const InsideLine = InsideLineCommon.extend`
&:after {
left: -200%;
}
transition: left ${props => props.theme.animationTime};
left: ${props => (props.isHalfWidth ? '-100%' : '-200%')};
${props => props.isInitialMoving && css`
left: -50%;
`}
${props => props.isInitialMoving && props.isHalfWidth && css`
left: 100%;
`}
${props => props.isHorizontalBarsMoving && css`
left: 200%;
`}
${props => props.isCrossoverBarMoving && css`
left: -200%;
`}
${props => props.isHalfWidth && css`
&:after {
width: 50%;
}
&:before {
width: 50%;
left: -100%;
}
`}
`;
const CommonLine = styled.div`
width: 100%;
height: 15%;
position: absolute;
`;
const MiddleLine = CommonLine.extend`
top: calc(100% / 2 - 7.5%);
`;
const TopLine = CommonLine.extend`
top: 0px;
`;
const BottomLine = CommonLine.extend`
bottom: 0px;
`;
const Wrapper = styled.button`
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
cursor: pointer;
border-style: none;
background: transparent
padding: 0px;
&:focus {
outline: 0px;
}
`;
const CrossoverWrapper = styled.div`
width: 100%;
height: 100%;
position: absolute;
top: 0px;
display: flex;
flex-direction: column;
justify-content: center;
&:after {
content: '';
position: absolute;
width: 100%;
height: 15%;
background: ${props => props.theme.colors.primary1};
transform-origin: center;
transform: ${props => (props.isCrossoverBarMoving ? 'rotate(45deg) translate(0%)' : 'rotate(45deg) translate(-130%)')};
transition: ${props => (!props.isCrossoverBarMoving
? `transform ${props.theme.animationTime} 0s`
: `transform ${props.theme.animationTime} ${props.theme.animationTime}`)};
border-radius: 5px;
}
&:before {
content: '';
position: absolute;
width: 100%;
height: 15%;
background: ${props => props.theme.colors.primary1};
transform-origin: center;
transform: ${props => (props.isCrossoverBarMoving ? 'rotate(-45deg) translate(0%)' : 'rotate(-45deg) translate(130%)')};
border-radius: 5px;
transition : ${props => (!props.isCrossoverBarMoving
? `transform ${props.theme.animationTime} 0s`
: `transform ${props.theme.animationTime} ${props.theme.animationTime}`)};
}
`;
class MenuButton extends Component {
constructor(props) {
super(props);
this.state = {
isCrossoverBarMoving: false,
isHorizontalBarsMoving: false,
isInitialMoving: false,
};
this.handleMouseClick = this.handleMouseClick.bind(this);
this.handleMouseHover = this.handleMouseHover.bind(this);
}
componentDidMount() {
setTimeout(() => {
this.setState({
isInitialMoving: true,
});
}, 1000);
}
handleMouseClick() {
this.setState(prevState => ({
isCrossoverBarMoving: !prevState.isCrossoverBarMoving,
}));
}
handleMouseHover() {
this.setState(prevState => ({
isHorizontalBarsMoving: !prevState.isHorizontalBarsMoving,
}));
}
render() {
const { isHorizontalBarsMoving, isCrossoverBarMoving, isInitialMoving } = { ...this.state };
return (
<Wrapper
onClick={this.handleMouseClick}
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
<TopLine>
<InsideLine
isHorizontalBarsMoving={isHorizontalBarsMoving}
isCrossoverBarMoving={isCrossoverBarMoving}
isInitialMoving={isInitialMoving}
/>
</TopLine>
<MiddleLine>
<InsideLine
isHorizontalBarsMoving={isHorizontalBarsMoving}
isCrossoverBarMoving={isCrossoverBarMoving}
isInitialMoving={isInitialMoving}
/>
</MiddleLine>
<BottomLine>
<InsideLine
isHalfWidth
isHorizontalBarsMoving={isHorizontalBarsMoving}
isCrossoverBarMoving={isCrossoverBarMoving}
isInitialMoving={isInitialMoving}
/>
</BottomLine>
<CrossoverWrapper
isCrossoverBarMoving={isCrossoverBarMoving}
/>
</Wrapper>
);
}
}
export default MenuButton;
Whenever I click this component, the all texts of whole app did flickering :/