Мне нужна помощь с проблемами, возникающими на моем веб-сайте, над которым я работаю.
Веб-сайт основан на
- Material-Kit шаблон
- React
- Material UI
- react-spring
Проблемы были записаны на физическом мобильном устройстве видео здесь
Назначение карты с синим цветом - переворачивание при наведении на нее мыши и переворачивание при отъезде. На веб-сайте он работает, как и ожидалось, но на мобильном устройстве он либо исчезает, либо часть карты обрезается.
SpeedDail, который представляет собой кнопку в правом нижнем углу экрана, должен постоянно отображать красный цвет независимо от того, какое действие. На веб-сайте он работает так, как ожидалось, но на мобильном устройстве он становится фиолетовым каждый раз, когда я нажимаю на него, и остается фиолетовым. Он снова станет красным, только если я щелкну за пределами области SpeedDail.
Код для компонента FlipCard Анимация была достигнута с помощью реактивной пружины
import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import {useSpring, animated} from 'react-spring';
const defaultContentStyle={
position:'absolute',
width:'100%',
height:'100%',
display:'flex',
flexDirection:'column',
justifyContent:'center',
alignItems:'center',
borderRadius:'5px',
backgroundColor:'#ffffff',
boxShadow:'0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
}
const defaultStyle = {
cardWrapper:{
position:'relative',
margin:'1%',
},
frontContent:{
...defaultContentStyle
},
backContent:{
...defaultContentStyle
},
icon:{
textAlign:'center',
},
title:{
textAlign:'center',
fontWeight:'800',
fontSize:'1.5em'
}
}
const HobbieCard = ({
icon,
title,
flipContent,
cardStyle,
frontContentStyle,
backContentStyle,
iconStyle,
titleStyle,
}) => {
const newStyle = defaultStyle;
newStyle.cardWrapper = {...defaultStyle.cardWrapper,...cardStyle};
newStyle.frontContent = {...defaultStyle.frontContent,...frontContentStyle};
newStyle.backContent = {...defaultStyle.backContent,...backContentStyle};
newStyle.icon = {...defaultStyle.icon,...iconStyle};
newStyle.title = {...defaultStyle.title,...titleStyle};
const useStyle = makeStyles(newStyle);
const classes = useStyle();
const [flipped, setFlipped] = React.useState(false);
const {opacity, transform} = useSpring({
opacity: flipped?0:1,
transform: `perspective(600px) rotateY(${flipped ? 180 : 0}deg)`
});
const handleFlip = (_e)=>{
setFlipped(!flipped);
}
return (
<div
className={classes.cardWrapper}
onMouseEnter={handleFlip}
onMouseLeave={handleFlip}
>
<animated.div
className={classes.frontContent}
style={{
opacity:opacity,
transform: transform
}}
>
<div className={classes.icon}>{icon}</div>
<div className={classes.title}>{title}</div>
</animated.div>
<animated.div
className={classes.backContent}
style={{
opacity:opacity.interpolate(o=>1-o),
transform: transform
}}
>
{
!flipContent?null:
<div style={{transform:`rotateY(180deg)`}}>{flipContent}</div>
}
</animated.div>
</div>
);
};
export default HobbieCard;
Код для компонента кнопки SpeedDail Кнопка действует как плавающая кнопка и отображает меню при нажатии. Он использует компонент SpeedDial в Material UI.
import React,{useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import MenuIcon from '@material-ui/icons/Menu';
import MenuOpenIcon from '@material-ui/icons/MenuOpen';
import Backdrop from '@material-ui/core/Backdrop';
const useStyles = makeStyles(theme=>({
speedDail: {
position: 'fixed',
right: '3%',
bottom: '3%',
zIndex: theme.zIndex.drawer+1,
},
backdrop:{
zIndex:theme.zIndex.drawer+1,
},
toolTipTitle:{
width:'100px'
}
}));
const SectionNav = ({actions, scrollBlock='start', scrollOffset=0}) => {
const classes = useStyles();
const [open, setOpen] = useState(false);
const handleClose = () => {
setOpen(false);
};
const handleOpen = () => {
setOpen(true);
};
const handleActionClick = (index)=>{
setOpen(false);
const action = actions[index];
//scroll to section
if(action && action.sectionRef){
console.log(action.sectionRef);
const top = action.sectionRef.current.getBoundingClientRect().top;
window.scroll({top:window.pageYOffset+top+scrollOffset, behavior:'smooth'})
}
}
return (
<React.Fragment>
<Backdrop className={classes.backdrop} open={open} />
<SpeedDial
className={classes.speedDail}
ariaLabel="SpeedDial example"
hidden={false}
icon={<SpeedDialIcon icon={<MenuIcon />} openIcon={<MenuOpenIcon/>} />}
onClose={handleClose}
onOpen={handleOpen}
open={open}
direction='up'
>
{
actions.map((action, index)=>{
return (
<SpeedDialAction
key={index}
icon={action.icon}
tooltipTitle={<div className={classes.toolTipTitle}>{action.name}</div>}
onClick={()=>handleActionClick(index)}
tooltipOpen
/>
)
})
}
</SpeedDial>
</React.Fragment>
);
};
export default SectionNav;
Тема SpeedDail Цвет SpeedDail был настроен с использованием тем в Material UI
MuiFab: {
primary: {
backgroundColor: '#f52d0a',
'&:hover': {
backgroundColor: '#f52d0a',
},
}
},
Я протестировал chrome DevTool как на веб-сайте, так и в мобильном режиме без каких-либо проблем. Проблемы возникают только на физическом мобильном устройстве, а мобильное устройство, которое я тестировал, находится на устройстве Apple с IOS.
Если кто-нибудь знает, каковы причины, которые приводят к этой проблеме, дайте мне знать, спасибо.
27/05/2020 Ок. Так что я вроде как разобрался.
Проблема с FlipCard Это из-за z-index, шаблон набора материалов имеет z-index 3, поэтому, когда он переворачивается, карта находится за div элемент, для которого в комплекте материалов установлен z-index 3 к. Но почему рендеринг работает нормально на веб-сайтах, а не на мобильных устройствах? Я все еще не могу не понять.
Проблема с SpeedDail Мне нужно настроить фабрику MuiSpeedDial, а не MuiFab.