What is the best way to make translateX transition function in Firefox?

I am encountering an issue with my code working in Chrome but not Firefox. Can anyone offer suggestions on how I can address this problem? The intended functionality is for the door to open when hovered over and for the landscape image to scroll across. However, in Firefox, the door does not fully open unless the mouse is positioned on the right edge. (Please note that I am restricted from modifying the HTML or using anything other than CSS)

Visit this link for reference

<ul id="calendar"><li><div class = "door">15</div></li></ul>
htmlcssfirefoxhover

Answer №1

When utilizing the translate() function on .door (which will cause movement of .door), it is recommended to trigger the transition upon hovering over the parent element li, rather than when hovering directly over .door.

  #calendar {
    width: 550px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  #calendar li {
    list-style: none;
    float: left;
    width: 110px;
    height: 110px;
    position: relative;
    overflow: hidden;
    margin: 30px;
    background-image: url(http://i.imgur.com/C68wDiS.jpg);
  }
  
  .door {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 0px;
    left 0px;
    color: white;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    vertical-align: middle;
    line-height: 110px;
    transition: transform 1s ease-in-out;
    background-color: grey;
  }
  
  #calendar li:hover .door {
    transform: translateX(110px);
  }
  
  #calendar li:hover {
    animation: slidingfour 3s ease-in-out;
  }
  
  @keyframes slidingfour {
    0% {
      background-position: 0px;
    }
    100% {
      background-position: -330px;
    }
  }
<ul id="calendar">
  <li>
    <div class="door">15</div>
  </li>
</ul>

Answer №3

Take a look at this solution.

-webkit-transform: translateY(110px); /* Browsers with WebKit engine */
-moz-transform: translateY(110px); /* Mozilla Firefox */
-ms-transform: translateY(110px); /* Internet Explorer 9 */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transformation of a double-row header

Click here to view the design - two-row header image I'm struggling with creating a header design that consists of two rows - the first row includes a centered logo and icons on the right side, while the second row contains the menu. Can someone guid ...

htmlcssbootstrap-4

Control the transparency of the initial parent div that includes an *ngFor loop

I want to add opacity only to the first div which contains an icon and a heading in another nested div. The second div should remain fully visible (opacity: 1). Here is the HTML structure: <div class="row clearfix"> <div class="col-lg-3 col- ...

htmlcssangulartypescript

Challenges with HTML and CSS drop-down menus

My navigation is giving me a headache. I've been trying to add a dropdown menu, but nothing seems to be working. Here's my current HTML/CSS code. If you have any suggestions on how to fix it, please lend a hand! I've also included a picture ...

htmlcssdrop-down-menuhover

Use selenium to locate an element based on its CSS selector

Looking to extract user information from each block using the following code snippet: driver.get("https://www.facebook.com/public/karim-pathan") wait = WebDriverWait(driver, 10) li_link = [] for s in driver.find_elements_by_class_name('clear ...

pythoncssseleniumselenium-webdriverweb-scraping

I would love to hear your suggestions for a custom select element plugin in jQuery

After browsing multiple options online, I decided to turn to the expertise of the Stack Overflow community to ask for recommendations based on personal experience. I am specifically in search of a plugin that can substitute a select element with a custo ...

javascriptjquerycssselectjquery-plugins

Engaging in payment processing

Currently facing a significant dilemma. I am utilizing Stripe as my payment gateway, which functions in a two-step process: Collect billing information to generate a token Charge the client using the generated token The issue arises because the token ca ...

javascriptphpjqueryhtmlstripe-payments

Boosted by Bootstrap 4 running smoothly on Internet Explorer version 10

I'm starting to have second thoughts about my decision to move to B4. I'm currently troubleshooting the navigation in IE 10 using their example: https://getbootstrap.com/docs/4.0/examples/jumbotron/ After checking it on IE 10, I noticed that th ...

htmlcsstwitter-bootstrapbootstrap-4

Craving assistance in coding permutations

Thank you for responding. I want to express my gratitude for your efforts in trying to assist me. Unfortunately, I have posted this problem on multiple websites and no one has been willing to help. Regarding my code, my objective is to count permutations. ...

javascripthtmlarrayspermutation

What could be causing the alignment issue with this html photo gallery?

Struggling to center a photo library on my webpage is really frustrating me. Does anyone have any tips? I've experimented with different ways to center it in the code, but nothing seems to do the trick :/ HTML: <div style="display: inline-block; ...

htmlcssweb

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

After successfully setting the ID in localStorage, I now need to retrieve and display only that specific record from my JSON data. The content of my localStorage is: This information is obtained from my JSON data after a button click. The challenge is us ...

javascriptjqueryajaxjsonhtml

What causes the discrepancy in CSS behavior between local and remote websites?

My chrome extension enhances facebook chatbox with jquery autocompletion. I am trying to make the suggestion list menu horizontal by modifying the jquery-ui.css. When changing display:block to display:inline, the list becomes horizontal in a local HTML fil ...

javascriptjqueryhtmlcssfacebook

Creating a dynamic list in HTML by populating it with randomly selected words using JavaScript

Check out my awesome code snippet function wordSelect() { var words = ["Vancouver", "Whistler", "Surrey", "Victoria", "Kelowna"]; //List of randomly-selected words from above var selectedWords = []; for(let i = 0; i &l ...

javascripthtml

"Get a glimpse of the brackets image with real-time live

I seem to be encountering a strange issue. I have double-checked the source code for my image, and when I view the page in Chrome without using Brackets, the image displays properly. However, when I use Brackets Live preview, the image does not show up i ...

htmlcssadobe-brackets

There appears to be an issue with the functionality of the external CSS pathway

placeholder image hereplaceholder image hereplaceholder image here I'm encountering a problem and struggling to identify the mistake in my current approach. ...

javascripthtmlcssnode.jsexpress

Ways to prevent continuous database record creation when refreshing the page

My form for adding records to the database looks like this: <form class="col s12" action="" method="post"> <div class="row"> <div class="input-field col s6"> <input placeho ...

phphtmlmysql

Is the CSS scale activated by mouseover or click?

My CSS code successfully scales images, but the issue is that it affects every image on the page. I am looking for a solution to apply this CSS only when the user hovers over or clicks on an image. The challenge is that images are added by non-technical w ...

javascriptcss

Merge adjacent CSS blocks seamlessly without the need for JavaScript

I am facing an issue with styling div elements that have editable content through a WYSIWYG inline editor on my website. Users often do not understand the importance of enclosing similar blocks of code in containing DIVs for proper formatting, resulting in ...

htmlcsscss-selectors

"Utilize PrimeNG's p-tabpanel to bind a unique style class to

When using the tabview component from PrimeNG, I am encountering an issue where I am unable to bind a header style class. Here is my static HTML code that works: <p-tabPanel header="Title" headerStyleClass="badge" formGroupName=&quo ...

htmlcssangularprimeng

Can you explain how to utilize theme values in CSS within Mui?

Working on my React app with mui themes, I have the following in index.js: let theme = createTheme({ palette: { primary: { main: "#00aaa0", contrastText: '#fcf4d9', }, secondary: { main: "#D55B3E&quo ...

cssreactjsmaterial-ui

Slippery carousel: Showcase all items in center alignment mode

Currently, I am implementing Slick Carousel with centerMode. Is there a method to ensure that all items are displayed without being cut off on the screen? The setup I have is quite simple: $('.your-class').slick({ centerMode: true, slidesTo ...

jquerycssslick.js