Firefox CSS Issue

See image 1 and 2. the button doesn't disappear after the card is flipped. HTML

<div class="front">
            <button id="front-button">Hover Me!</button>
          </div>

<div class="front">
            <button id="front-button">Hover Me!</button>
          </div>

const isMobile = window.innerWidth < 768;

const buttonText = isMobile ? 'Tap Me!' : 'Hover Me!';
document.getElementById('front-button').textContent = buttonText;

const isMobile = window.innerWidth < 768;

const buttonText = isMobile ? 'Tap Me!' : 'Hover Me!';
document.getElementById('front-button').textContent = buttonText;

CSS

.front button {
  width: 120px;
  border: 1px solid black;
  background: black;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 20px;
  color: rgb(255, 255, 255);
  text-align: center;
}

.front button {
  width: 120px;
  border: 1px solid black;
  background: black;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 20px;
  color: rgb(255, 255, 255);
  text-align: center;
}

These are the code for the button

10 Replies

riddle•5mo ago

Full code here : https://github.com/r-ddle/r-ddle.netlify.app

GitHub

GitHub - r-ddle/r-ddle.netlify.app: A simple website made by a newb...

A simple website made by a newbie web dev. Contribute to r-ddle/r-ddle.netlify.app development by creating an account on GitHub.

clevermissfox•5mo ago

backface-visibility: hidden

riddle•5mo ago

I am supposed to add this to the button right?

riddle•5mo ago

if yes then this is what happens

riddle•5mo ago

I'm stil confused tho. Opera GX, Edge, Chrome and Brave all of those browsers don't have an issue except for firefox are we supposed to write css differently for firefox?

clevermissfox•5mo ago

Try adding prefixes, yeah Firefox and safari have some properties that aren’t supported. For example, if I use a background-image: linear-gradient(to right in oklch, oklch(39%, 0.3, 360), oklch(44%, 0.28, 360)) it doesn’t work in Firefox ! No gradient, no background at all because I hadn’t added a fall back. However, taking off the “in oklch” allows it to work🤷🏻‍♀️ I’m not sure about backface-visibility but it seems like it should be supported. Try prefixing it also


backface-visibility: hidden;
-moz-backface-visibility:hidden;
-webkit-backface-visibility: hidden;

riddle•5mo ago

It really didn't do anything, I checked browser stats and firefox is not that popular not feeling like learning firefox rules just to fix a card 🥹 well thanks anyways

clevermissfox•5mo ago

Firefox is one of the three major browsers, if you don’t want to learn how to work with it , you could try running your style sheet through a prefixer to get all the prefixes you need

vince•5mo ago

Are you learning web dev to find a job? Writing compatible code is a must

Jochem•5mo ago

it's also not that much of a hassle

Gaming

Programming

Firefox CSS Issue