Html Element not displaying on FireFox but displaying on Chrome [closed]-CodePudding

I am stuck on an issue where i was working with an individual component (simple dropzone). However its working fine on chrome, its css is fine.

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;
}

Problem: The problem is on firefox, where its not displaying. I Have applied css, not sure if i added css correctly.

If someone have any idea about the Firefox not displaying due to position, please help me out. Thanks for your time.

CodePudding user response：

The problem lies with the invalid CSS:

 // PRESENTATIONAL CSS

The Firefox CSS parser is not recovering from the error without consuming the next line providing background color for the body element. My experience is that Firefox will resume parsing after the next ; or perhaps } in order to bypass errors that have been encountered.

The solution of course is to use a CSS comment:

/* PRESENTATIONAL CSS */

update:

Checking the console (in Firefox) reveals additional errors:

.inputDnD {
   .form-control-file {

shows that .form-control-file { is not a valid CSS property name. Microsoft Edge, also a webkit browser, confirms multiple problems with the validity of the CSS. I suggest correcting the CSS before continuing.