Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have:

img.buttonImg {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out; 
  -o-transition: all 0.5s ease-in-out; 
  -ms-transition: all 0.5s ease-in-out; 
  transition: all 0.5s ease-in-out; 
}

img.buttonImg:hover { 
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
  transform: rotate(360deg); 
}

Despite writing this code, the animation doesn't seem to be working correctly on FireFox. It appears that the image isn't rotating as expected, while it does work on other browsers.

Answer №1

Identifying the issue can be done through this specific example.

The transition effect may not function properly when hovering over the img component due to its placement within a button element. It appears to be a rendering concern, primarily affecting FF browser. Chrome and other modern browsers do not encounter this issue.

To resolve this, simply removing the img from the button will fix the problem.

Another approach could involve applying the rotation transition effect when hovering over the parent button instead of the child img. Check out the updated example where it performs correctly in FF.

button.t:hover img { 
    transform: rotate(360deg);
   /* other vendors.. */
}

Both solutions are effective; however, the compatibility of having an img within a button is questionable. This potential conflict might lead to the rendering glitch observed, if indeed it is classified as a bug.

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

Utilizing Marionette Driver with Firefox 48 for Seamless Selenium Integration

Is it possible to use MarionetteDriver with a portable Firefox 48? I understand how it can be done with an installed Firefox 48: String marionetteDriverLocation = getClass().getClassLoader().getResource("[PATH_TO_GECKODRIVER]/wires.exe").getPath(); System ...

When the screen is minimized, my website doesn't align to the center as expected

When the screen is maximized everything looks great, but when I minimize it, the content doesn't center. I tried using margin: auto; in the "main-div" class, but then everything shifted to the top left corner. So, I added a "wrapper-div" to contain th ...

Icon that can be clicked before

I'm struggling to figure out how to make the link icon in my code clickable so that users can click anywhere within the card to navigate to another page. I experimented with (" attr(href) ") but it resulted in adding the URL text next to the ...

Using Array Data Format to Customize Color in Highcharts Funnel Chart

I have included the funnel visualization code that I've been working on. $(function() { var dataEx = [ ['1 Visit', 352000], ['2 Visits', 88000], ['3+ Visits', 42000] ], len = dataEx.length, ...

When the search is focused, I prefer for the expanding search box to overlay the menu section rather than pushing it aside, all without the use

I am working on a search box with a subtle animation: <input class="search" type="search" placeholder="Search"> To make it expand when focused, I used the following CSS: .search:focus { width: 225px; outline: none; } I also experimented w ...

Issue with margin-top in combination with clear:both does not function as expected

<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> What is causing the margin-top property to not work as expected for 'Main Dat ...

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...

Bootstrap allows for the creation of five columns of equal width that span the full width of the container

My PSD template includes a CONTAINER with 5 equal width columns measuring 344px each. I initially opted for Bootstrap to handle responsiveness, but now I'm feeling overwhelmed by the task. Is there a way to tackle this issue, or should I: Revise my ...

Introducing a variety of sub-menu fonts within an elegantly designed jQuery vertical accordion menu

I am struggling to achieve different font sizes, colors, and weights for top and sub-menu level links in my simple jQuery vertical accordion. Despite changing the CSS, I can't seem to get it right. What am I missing? Is there an easy way to accomplish ...

Maintaining hover functionality of menu button while navigating through sub-menu options

Creating a CSS dropdown menu is straightforward, but maintaining the hover state on the main menu button while navigating through the dropdown selections can be tricky. In the past, I used JavaScript to change the class and retain the background image, but ...

Tips for incorporating border/outline/stroke into SVG elements using CSS

Currently, I am incorporating SVG elements into a webpage using D3js. However, I am facing challenges when it comes to styling these elements as typical CSS syntaxes like path { border: 3px solid green; } do not seem to work. Is there a way to apply bo ...

Modifying CSS Styles using JQuery

I've been attempting to use JQuery to change a CSS property without success, despite trying multiple solutions found on SO. Here's what I've attempted (with numberHours being a previously defined variable): $(".cd-schedule .events .top-inf ...

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

Using the bootstrap container-fluid to create additional space on the right side

I've been trying to remove the right side padding in my container-fluid without success. There seems to be extra space where the red lines are marked. I have attempted various methods to fix this issue but I can't seem to identify where this ex ...

Launch a Firefox Profile in Selenium with incognito browsing enabled

I have multiple profiles set up in Firefox to use with Selenium, but now I need to open a Firefox profile in Private Browsing Mode. How can I achieve this? Here is my code snippet: ProfilesIni profile = new ProfilesIni(); FirefoxProfile ffprofile = profil ...

Tips for combining a linear-gradient and background-image on a single element:

Is it possible to apply a linear-gradient color along with a background-image on the same div element in HTML? I've been trying to achieve this but haven't been successful so far. Any suggestions would be greatly appreciated. Below is the snippe ...

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

My webpage contains a div element positioned in the middle of the content, with its height being adjustable through JavaScript code. I am seeking a way to manage the scrolling behavior when the height of the div changes. Specifically, I want the content t ...

Creating a gallery layout using Flexbox that maintains the aspect ratio of images of varying sizes

I've been working on creating a gallery layout using flexbox similar to this design: Example of desired outcome The goal is to have images displayed in two columns next to each other, resizing to the size of the largest image without distortion. On m ...

Creating a Navigation Bar using the Flexbox property

As a beginner, I attempted to create a navbar using flex but did not achieve the desired outcome. My goal is to have: Logo Home About Services Contact * { margin: 0; padding: 0; font-family: ...

"Gone in a Scroll: Div vanishes as page moves

Fiddle: http://jsfiddle.net/ud6hejm6/ I was tasked with creating a website for a video game tournament. By opening the fiddle link provided, you can preview the page layout. A central div is featured in the design: <div class="middle teko" id="mezzo"& ...