Ryan
Reputation: 151
How can I prevent Safari from changing the styling?
The first image is how the styling appears on Safari for a moment when the page renders, then it changes to the styling in the second picture. I haven't had this issue before and I'm not sure how to prevent it. Chrome is rendering properly.
The stack I am using is nextjs with Material-UI library if that makes a difference.
Any ideas?
import { withStyles } from '@material-ui/core/styles';
export default withStyles(theme => {
const colors = theme.palette.colors;
return {
hidden: {
display: 'none'
},
title: {
fontFamily: 'Roboto Condensed',
fontSize: 22,
margin: '15px 0 20px 0'
},
subTitle: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 300,
color: '#aaaaaa',
margin: '0 0 30px 0'
},
awardsCont: {
maxWidth: 340,
margin: '0px auto 48px auto'
},
awardCont: {
width: 70,
height: 95,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
margin: 'auto'
},
awardSelected: {
background: '#EBEBEB',
borderRadius: 3
},
awardIcon: {
height: 50,
width: 'auto',
transform: 'translate(-50%)',
marginLeft: '50%'
},
awardText: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 500,
color: '#aaaaaa'
},
good: {},
great: {
color: '#fcc73f'
},
perfect: {
color: '#a4aebc'
},
subtitleContainer: {
paddingLeft: 6
},
subTitle2: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 300,
color: '#b9b9b9',
// color: 'blue',
marginBottom: 10,
textAlign: 'center'
// [theme.breakpoints.up('lg')]: {
// textAlign: 'left',
// paddingLeft: 6
// }
},
tagsContainer: {
[theme.breakpoints.up('lg')]: {
width: '50vw',
margin: '0 auto'
},
[theme.breakpoints.up('md')]: {
width: '80%',
margin: '0 auto'
},
[theme.breakpoints.up('sm')]: {
width: '90%',
margin: '0 auto'
}
},
// tagsCont: {
// width: '100vw',
// boxSizing: 'border-box',
// padding: 8
// },
subTitle2: {
fontFamily: 'Roboto',
fontSize: 16,
fontWeight: 300,
color: '#aaaaaa',
marginTop: 40,
marginBottom: 10
},
comment: {
width: 'calc(100% - 32px)',
height: 100,
margin: '0 16px 20px 16px',
padding: 8,
boxSizing: 'border-box',
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: 16,
color: '#A9A9A9',
background: 'white',
boxShadow: '0px 2px 6px rgba(46, 46, 46, 0.2)',
borderRadius: 5,
border: 'none',
'&:focus': {
outline: 'none',
background: 'white',
fontWeight: 300,
color: '#A9A9A9'
},
'&:active': {
outline: 'none',
background: 'white',
color: '#A9A9A9',
fontWeight: 300
},
[theme.breakpoints.up('lg')]: {
margin: 0,
width: '100%'
}
},
submitBtn: {
width: 140,
height: 45,
margin: '0 10px 40px auto',
fontFamily: 'Roboto',
fontSize: 16,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0px 4px 8px rgba(46, 46, 46, 0.1)',
background: '#E0E0E0',
borderRadius: 5,
color: 'white',
[theme.breakpoints.up('lg')]: {
margin: '8px 0 0 auto'
}
},
clickable: {
background: '#FF9649',
cursor: 'pointer'
},
//prev styling below
groupNotSelected: {
cursor: 'pointer',
margin: '0 10px',
fontFamily: 'Roboto Condensed',
fontSize: '16px',
fontWeight: '300',
letterSpacing: '0.05em',
color: '#AAAAAA'
},
purpose: {
cursor: 'pointer',
margin: '0 10px',
padding: '3px 10px',
borderRadius: 5,
fontFamily: 'Roboto Condensed',
fontWeight: 'bold',
letterSpacing: '0.05em',
fontSize: '16px',
backgroundColor: '#FFEAE4',
color: '#D24207',
cursor: 'pointer'
},
features: {
cursor: 'pointer',
margin: '0 10px',
padding: '3px 10px',
borderRadius: 5,
fontFamily: 'Roboto Condensed',
fontWeight: 'bold',
letterSpacing: '0.05em',
fontSize: '16px',
backgroundColor: '#FFEFDE',
color: '#FF982A'
},
location: {
cursor: 'pointer',
margin: '0 10px',
padding: '3px 10px',
borderRadius: 5,
fontFamily: 'Roboto Condensed',
fontWeight: 'bold',
letterSpacing: '0.05em',
fontSize: '16px',
backgroundColor: '#FFF4D7',
color: '#F4C95D'
},
body: {
width: '98%',
margin: '0 auto',
[theme.breakpoints.up('md')]: {
width: '80%'
},
[theme.breakpoints.up('lg')]: {
width: '60%'
}
},
filterSelectionGroup: {
cursor: 'pointer',
padding: '0 8px'
},
filter: {
display: 'flex',
alignItems: 'center',
height: 58,
textAlign: 'center',
fontFamily: 'Roboto',
fontWeight: '300'
},
// card: {
// boxSizing: 'border-box',
// paddingLeft: 20,
// cursor: 'pointer',
// display: 'flex',
// alignItems: 'center',
// justifyContent: 'left',
// height: 58,
// fontFamily: 'Roboto',
// fontWeight: 300,
// fontSize: '16px',
// borderRadius: 5,
// backgroundColor: '#FFFFFF',
// color: '#AAAAAA',
// boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);',
// [theme.breakpoints.up('md')]: {
// borderRadius: 15,
// height: 110,
// fontSize: 18
// }
// },
card: {
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
backgroundColor: '#FFFFFF',
color: '#AAAAAA',
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
purposeSelected: {
color: '#D24207 !Important',
backgroundColor: '#FFEAE4',
zIndex: 20,
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
featureSelected: {
color: '#FF982A !Important',
backgroundColor: '#FFEFDE',
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
locationSelected: {
color: '#F4C95D !Important',
backgroundColor: '#FFF4D7',
boxSizing: 'border-box',
margin: 6,
paddingLeft: 20,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'left',
height: 58,
fontFamily: 'Roboto',
fontWeight: 300,
fontSize: '16px',
borderRadius: 5,
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);'
},
firstSubTitle: {
margin: 0,
fontFamily: 'Roboto condensed',
fontWeight: 'bold',
fontSize: '14px',
color: '#AAAAAA',
textAlign: 'left'
},
icon: {
justifySelf: 'start',
marginRight: 12
},
submit: {
position: 'fixed',
bottom: 70,
margin: '0 auto',
[theme.breakpoints.up('md')]: {
position: 'relative',
marginTop: 90,
marginBottom: -45
}
},
submitButtonIcon: {
width: 'auto',
height: 15,
margin: 'auto 0 auto 5px'
},
buttonsContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto'
},
locationContainer: {
display: 'flex',
alignItems: 'center',
marginLeft: -20,
[theme.breakpoints.down('xs')]: {
maxWidth: '80%',
padding: 0
},
[theme.breakpoints.down('sm')]: {
maxWidth: '100%',
padding: 0
}
},
input: {
boxShadow: '0px 4px 8px rgba(46, 46, 46, 0.1);',
border: 'none',
width: '100%',
height: 50,
marginLeft: -25,
marginRight: -35,
borderRadius: 5,
color: '#AAAAAA',
fontSize: 16,
fontWeight: 300,
fontFamily: 'Roboto',
textAlign: 'center'
},
locationIcon: {
zIndex: 1,
height: 'auto',
width: 35,
color: '#F4C95D',
margin: 'auto',
marginRight: -20
},
arrowIcon: {
color: '#F4C95D'
},
blueLineSelected: {
color: '#3C91E6 !Important',
backgroundColor: '#ECF5FF !Important'
},
redLineSelected: {
color: '#EA2B1F !Important',
backgroundColor: '#F9E3E2 !Important'
},
brownLineSelected: {
color: '#61210F !Important',
backgroundColor: '#F9EBE7 !Important'
},
pinkLineSelected: {
color: '#CA2E55 !Important',
backgroundColor: '#FCF2F5 !Important'
},
greenLineSelected: {
color: '#00A878 !Important',
backgroundColor: '#EEFFFA !Important'
},
orangeLineSelected: {
color: '#FF6201 !Important',
backgroundColor: '#FFF6F0 !Important'
},
trainContainer: {
borderRadius: 5,
[theme.breakpoints.up('md')]: {
borderRadius: 15
}
},
subContainer: {
zIndex: 1,
height: 'auto',
background: 'none'
},
brownLineContainer: {
marginBottom: 50
},
subTag: {
height: 10,
padding: 10,
margin: 8,
background: 'white',
boxShadow: '0px 3px 4px rgba(105, 51, 12, 0.3);',
borderRadius: 5,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: 16,
color: '#AAAAAA'
},
successMessage: {
// position: 'absolute',
// top: 0,
width: '100%',
boxSizing: 'border-box',
padding: '10px 30px',
textAlign: 'center',
fontSize: 16,
fontWeight: 300,
fontFamily: 'Roboto',
lineHeight: '150%',
color: '#4a8a4a',
background: '#ccebc9'
}
};
});
Upvotes: 0
Views: 1187
Answers (2)
Ryan
Reputation: 151
I had a classname called twice. It wasn't breaking anything in a Chrome browser but it was in a Safari browser. Once I removed the second class variable the styling worked fine.
Upvotes: 1
VSM
Reputation: 1785
When consider this rendering issue, it seems like a style overriding issue. I guess you have used material .container class for html layout and after that you have overided that styles in .container class by changing it's default values. Webpage shows it's original styles values at initial paint and it takes few seconds to override that default styles by yours. This may be the reason for your layout change over the time.
Upvotes: 0
Related Questions
- Is there a way to apply styles to Safari only?
- How to disable a part of css property in safari?
- Apply CSS only for Safari?
- Using '-webkit-appearance:none;' to stop apple messing with CSS
- CSS not working as expected in Safari
- CSS hack for Safari ONLY
- How can I prevent browsers from using default styles
- CSS in Safari, applied only after closing Inspector/editing 'live'
- CSS specific for Safari
- Safari: Ignoring a lot of CSS