As I work on styling a React component using CSS, I noticed that I'm getting different results in Chrome and Firefox:
Firefox (which is the desired behavior for both): https://i.sstatic.net/Q0LSD.png
Chrome: https://i.sstatic.net/s2MWJ.png
While I'm not overly concerned about matching the display exactly between the two browsers, I do want it to look presentable on Chrome as well. It seems like Chrome is interpreting the button text as a separate element appearing after the button. I have set the white background to be visible for the question, but it will eventually be transparent, so there's no need to address that specifically.
I currently utilize normalize.css without any vendor prefixes, as I'm not very familiar with them yet (any simple resources to learn more about this would be greatly appreciated!).
Here's the JSX for the entire component (with the class "slide__caption__button" as my main concern):
<div className = "slide">
<img className = "slide__image" src = {this.chooseImage()}></img>
<div className = "slide__caption"
onMouseEnter = {() => {
this.props.pausingSlideshow();
}}
onMouseLeave = {() => {
this.props.unpausingSlideshow();
setTimeout(this.props.changeSlide, 0);
}}
>
<p>{this.props.caption}</p>
<br />
<button
className = "slide__caption__button"
onClick = {this.sendTo.bind(this, this.props.buttonHref)}
>
<span>{this.props.buttonText}</span>
</button>
{/* slide chooser */}
<div className = "chooser">
{
this.props.slidesLength.map((index) => {
return (
<div
key = {index}
className = "chooser__button"
onClick = {this.props.goToSlide.bind(this, index)}
>
o
</div>
);
})
}
</div>
</div>
</div>
And here's my CSS styling:
.slide {
position: absolute;
background: white;
height: 100vh;
width: 100vw;
}
.slide__image {
opacity: 0.5;
object-fit: cover;
width: 100%;
min-height: 100%;
}
// mobile
.slide__caption {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: 20%; bottom: 0; left: 0; right: 0;
font-weight: 600;
margin: auto;
width: 40%;
height: 20%;
background: white;
border-radius: 1rem;
text-align: center;
text-shadow: -2px 2px 2px $cream, 2px -2px 2px $cream, -2px -2px 2px $cream, 2px 2px 2px $cream;
color: #112233;
}
.slide__caption__button {
position: relative;
padding: 1rem;
background: purple;
border: 1px solid #112233;
border-radius: 3rem;
color: white;
box-shadow: 0 2px 2px grey;
margin: auto;
}
.slide__caption__button:hover {
cursor: pointer;
box-shadow: none;
background: lighten(purple, 10%);
}
.chooser {
display: flex;
justify-content: center;
}
.chooser__button {
color: transparent;
width: .8rem;
height: .8rem;
border: solid 1px $dark;
border-radius: 1rem;
background: lighten($dark, 10%);
text-shadow: none;
opacity: .4;
margin: 2rem .6rem;
}
.chooser__button:hover {
cursor: pointer;
background: lighten($dark, 40%);
}
// desktop
@media (min-width: $desktop-breakpoint) {
.slide__caption {
top: 0;
bottom: 20%;
}
}