Making CSS appearance the same across safari and Firefox

Question

I'm new to web development and I used Chrome as a reference when styling it. Some of my features won't work in safari and firefox - for example, the drop-down list (contact and stockist) will only open on click in chrome but not other browsers. I added -moz- and -webkit- PREFIX but it still won't work. I'm also trying to change the font-size for firefox and safari but that won't work either. I changed some other elements with this property like the crossfade image animation which does work Not sure what I'm doing wrong, can't find answers for this in recent years. Also, firefox won't recognize the root font applied to the text in mandarin but safari and chrome work. how it looks in chrome ->

how it looks in firefox ->

HTML + CSS

@font-face {
   font-family: Hiragino Sans GB;
   src: url("//db.onlinewebfonts.com/t/3f086dbc376893f56b4a9c4d3cac5df9.eot");
}

:root {
   --grCol1: rgb(247, 245, 245);
   --grCol2: #ffffff;
   --grCol3: rgb(236, 235, 235);
   --grCol4: rgb(247, 245, 245);
   --svg: rgb(204, 201, 201);
   --gradient: radial-gradient(var(--grCol1), var(--grCol3), var(--grCol4));

}

html {
   scroll-behavior: smooth;
   padding: 0;
   -moz-font-size: 10px;
   -webkit-font-size: 15px;
   font-size: 16px;
   font-size-adjust:0.5;

}
.contact {
   position: relative;
   top: 5vh;
   right: 0;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;

}

.contactbtn {
   color: white;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: bold;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;

}

.contactbtn:hover {
   opacity: 0.6;
}

.contact ul,
.contact-a ul {
   position: absolute;
   left: -10vw;
   margin-top: 20px;
   width: 300px;
   height: 150px;
   font-size: 1.5rem;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-end;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   opacity: 0;
   transform: translateY(-10px);
   transition: all 0.4s ease;
   -webkit-transform: translateY(-10px);
   -webkit-transition: all 0.4s ease;
   -moz-transform: translateY(-10px);
   -moz-transition: all 0.4s ease;

}

.contact a,
.contact-a a {
   color: black;
   text-decoration: none;
}

.contact a:hover,
.contact-a a:hover {
   /* opacity: 0.6; */
   background-color: var(--grCol3);
}

.contactbtn:focus+ul {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0);
   -moz-transform: translateY(0);
   -webkit-transform: translateY(0);
   outline: none;
}

/* about page contact */

.contact-a {
   position: absolute;
   top: 5vh;
   left: 5vw;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;
   color: var(--grCol3);
}

.contact-a ul {
   align-items: flex-start;
   left: 0;
}

/* about page */

.about-container {
   /* border: solid 2px purple; */
   width: 90vw;
   height: 100vh;
   position: absolute;
   top: 0;
   /*left: -90vw; */
   box-shadow: 10px 0px 10px 1px #aaaaaa;
}

.textSection {

   width: 35vw;
   height: 90vh;
   position: relative;
   top: 5vh;
   left: 47vw;
   display: flex;
   justify-content: center;
   align-items: center;
   /* border: solid 2px purple; */

}

.about {

   position: absolute;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   transition: all 1s;
   text-indent: 1.5em;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 4rem 2rem;
}

.transparent {
   opacity: 0;
}

.eng {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.1rem;
   line-height: 1.6;
   text-align: justify;
   color: black;


}

.mandarin {

   font-family: Hiragino Sans GB;
   -moz-font-family: Hiragino Sans GB;
   font-size: 1.1rem;
   line-height: 2;
   text-align: justify;
   text-transform: uppercase;
   font-weight: bold;
   color: black;
   padding: 3rem;
}


.langChange {
   position: absolute;
   font-size: 2rem;
   left: 84vw;
   top: 88vh;
   color: black;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;

}

.langChange:hover {
   opacity: 0.6;
   transform: translateY(5px);
}

.stockist {
   position: relative;
   display: inline;
   top: -85vh;
   right: -20vw;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;

}

.stockistbtn {
   color: white;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: bold;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;

}

.stockistbtn:hover {
   opacity: 0.6;
}

.stockist ul {
   position: absolute;
   left: -9vw;
   margin-top: -5vh;
   width: 300px;
   height: 150px;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-10px);
   -moz-transform: translateY(-10px);
   -webkit-transform: translateY(-10px);
   transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -webkit-transition: all 0.4s ease;
}

.stockist p {
   color: var(--grCol3);
   text-decoration: none;
}

.stockist p:hover {
   background-color: black;
}

.stockistbtn:focus+ul {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0);
   -moz-transform: translateY(0);
   -webkit-transform: translateY(0);
   outline: none;
}

#crossfade {
   position: absolute;
   top: 0;
   left: 0;
   width: 40vw;
   height: 100vh;
   z-index: -10;
   background-size: cover;
   animation: fade-about linear 16s infinite;
   -webkit-animation: fade-about linear 16s infinite;
   -moz-animation: fade-about linear 16s infinite;
}

@keyframes fade-about {
   0% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   25% {
      background-image: url("/img/Home/tag\ 150dpi.jpg")
   }

   50% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   75% {
      background-image: url("/img/Home/CARE\ LABEL\ 150DPI.jpg")
   }

   100% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

}


@-moz-keyframes fade-about {
   0% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   25% {
      background-image: url("/img/Home/tag\ 150dpi.jpg")
   }

   50% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   75% {
      background-image: url("/img/Home/CARE\ LABEL\ 150DPI.jpg")
   }

   100% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

}

<section class="about-container">
   <div class="textSection">

      <div class="eng about" id="eng">
         <p>Shek Leung is a London-based eponymous studio run by Samson (Shek Yen) Leung. Shek Leung,
            through moving images, translates intangible emotions and narratives into the tangibles. It is a
            brand that pursues the altruism and honesty through acceptance of imperfection in artisanal
            craftsmanship and subtle details. We hope to create a sense of humanistic touch in the dialogues we
            have with our audiences.<br></p><br>
         <p>At Shek Leung, we do not define our customers by sexuality. They embrace their vulnerability
            with confidence and express quiet sensuality through masculinity. It is through tactile textures
            and sensitive details that we bring this vision to life.</p><br>
         <p>Born in Taiwan and raised in Hong Kong, Samson Shek Yen Leung completed his BA and MA Fashion in
            Womenswear at Central Saint Martins, both collections of which were selected and showcased at the
            CSM press show and London Fashion Week. <br><br> Whilst pursuing his education, Samson’s professional
            experiences broadly encompass a wide range of leading fashion houses, including Proenza Schouler in
            New York; Craig Green and Aitor Throup in London; Taro Horiuchi and Written Afterwards in Tokyo.
         </p>
      </div>
      <div class="mandarin about transparent" id="man">
         <p>
            (Mandarin characters go here. (had to edit that part out because Stack overflow wasn't accepting my question with it)
         </p>
      </div>
   </div>
   <button class="langChange">⥃</button>
   <div class="contact-a">
      <button class="contactbtn">Contact</button>
      <ul class="contact-content">
         <li>
            <p>For Any Enquiries→</p>
         </li>
         <li><a href="mailto:hello@shekleung.com" target="_blank">hello@shekleung.com</a></li>
         <li>+44 7463 070158</li><br>
         <li><a href="https://www.instagram.com/samsonleung/?hl=en" target="_blank">Instagram</a></li>
      </ul>
   </div>
   <div class="stockist">
      <button class="stockistbtn">Stockist</button>
      <ul class="stockist-content">
         <li>
            <p>COMING SOON</p>
         </li>

      </ul>
   </div>
   <div id="crossfade">
   </div>
</section>

checked your code on firefox browser. everything works well. — s.kuznetsov, Sep 04 '20 at 11:22
I've attached a screenshot of how it looks in chrome vs firefox *font-size, image wont crossfade and contact and stockist btn wont dropdown — Laiqa Mohid, Sep 04 '20 at 11:45
This is your problem, you should do it on : class `.contactbtn:focus+ul` — MaxiGui, Sep 04 '20 at 11:52
You updated your question or your code localy ? Because there is no change in your question — MaxiGui, Sep 04 '20 at 11:55
i mean locally I updated it, but will update the question too — Laiqa Mohid, Sep 04 '20 at 11:58
Please comment your `left: -90vw;` into class : `about-container` to make the snippet working — MaxiGui, Sep 04 '20 at 12:15
Does this answer your question? [Safari: focus event doesn't work on button element](https://stackoverflow.com/questions/42758815/safari-focus-event-doesnt-work-on-button-element) — MaxiGui, Sep 04 '20 at 12:38
also for safari, if i cant use focus, what should i use? i tried hover but the menu dissapears if i move the mouse from buttons — Laiqa Mohid, Sep 04 '20 at 13:15

Making CSS appearance the same across safari and Firefox

0 Answers0