Having some trouble with an individual component (a simple dropzone) while testing on Firefox. It seems to work fine on Chrome, and the CSS looks good.
Css
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 50%;
}
.inputDnD {
.form-control-file {
position: relative;
width: 100%;
height: 100%;
min-height: 6em;
outline: none;
visibility: hidden;
cursor: pointer;
background-color: #c61c23;
box-shadow: 0 0 5px solid currentColor;
&:before {
content: attr(data-title);
position: absolute;
left: 0;
width: 100%;
min-height: 6em;
line-height: 2em;
padding-top: 1.5em;
opacity: 1;
visibility: visible;
text-align: center;
border: 0.25em dashed currentColor;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
overflow: visible;
}
&:hover {
&:before {
border-style: solid;
box-shadow: inset 0px 0px 0px 0.25em currentColor;
}
}
}
}
// PRESENTATIONAL CSS
body {
background-color: #1F1F1F;
}
Issue: The problem arises when viewing on Firefox, where it's not displaying as expected. I've double-checked my CSS implementation but can't figure out why it's behaving this way.
If anyone has insights on why Firefox might be struggling to display due to the positioning, I would appreciate your assistance. Thank you for your time.