Is there a bug in Firefox when using rotate3d to transition from -90 degrees to -180 degrees

Currently in the process of developing a 3D content slider jQuery plugin and encountering an unusual issue with Firefox. The rotation seems to be behaving unpredictably, rotating from -90deg to -180deg through 270deg in the opposite direction. While I understand that some aspects of this project are experimental, I have not come across any relevant documentation addressing this specific problem.

Your assistance on this matter would be greatly appreciated.

To see a demonstration of the issue (best viewed in webkit and the latest version of Firefox), please visit: http://jsbin.com/iwokok/8/ For access to the plugin itself, you can find it here: https://github.com/p-m-p/jquery-box-slider

UPDATE: A bug report has been filed with Mozilla You can keep track of the status of this bug report by visiting: https://bugzilla.mozilla.org/show_bug.cgi?id=769892

htmlfirefoxcsscss-transforms

Answer №1

If you believe you've encountered an issue with Firefox, the best course of action is to report it on the official Firefox bug tracker:

https://bugzilla.mozilla.org/

Answer №2

CORRECTION: I misunderstood the CSS in the text below.

The process involves transitioning between a transform that rotates and then translates, and a transform that translates and then rotates.

When the transform functions in the two lists do not match up, according to specifications, both transforms are combined into a single transform matrix for interpolation.

Within the matrix representation, -180deg is considered equivalent to 180deg. Therefore, during interpolation, it may appear as though the transition goes from -90deg to 180deg, depending on the chosen method of interpolation (as there is no exactly defined method in the 3D transform specification).

To ensure consistent results in transform interpolations that are not impacted by floating-point errors or intermediate computations, it is advisable to interpolate between transform lists with identical functions in the same order.

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

Adding another column in Bootstrap causes it to shift downwards

![image description][1] I have noticed that when I add column number 1, column number 2 moves down. But when I delete column number 1, column number 2 moves up as expected, similar to column number 3. I'm unsure why this is happening? <div class=& ...

htmlcssbootstrap-4

Customizing SVGs for Ion Icons Version 5 in a React Application

I have been using ion icons in React by importing them directly into my index.html. While this method has been working well with the icons from ion icons found here, I know that you can also use custom SVGs by specifying an src attribute in the ion-icon ta ...

htmlreactjssvgionicons

Attempting to center two divs to start at the same point

I've been attempting to center align two divs and have them start at the same position using CSS. Below is the inline CSS code. The first div is named container and the second div is named descriptionarea. #container { width: 60%; ...

htmlcss

Adding a class to an element can be easily achieved when both input fields have values

Is it possible to apply the "active" class to the element go_back_right only when both inputs with classes search_box_name and search_box_id have content in them? I've tried looking for solutions on this platform, but being new to JavaScript, I couldn ...

javascripthtmljquerycss

Struggling to retrieve CSS property from a child element?

Check out this HTML snippet: <div id="ctr" class="faden-slider-container"> <div class="conteneur-image" ></div> <div class="conteneur-image" ></div> <div class="conteneur-image" ></div> </div> ...

javascriptangularjshtml

React Bootstrap Hamburger Menu in Motion

I've been struggling to move my hamburger menu to the right side of the screen. Despite trying various methods like float, shift right, and alignment, the menu stubbornly remains on the left. I've scoured all the Stack Overflow articles on this i ...

javascriptcssreactjsbootstrap-4

What is the best way to reverse a condition in CSS?

Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything. .dropdown-menu>li>a { padding: 3px 5px; } <li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for t ...

htmlcss

100% width with a pixel offset

In the past, I have achieved this by using padding. The concept is to have two div elements positioned side by side, where one has a width of 100% and the other has a fixed width of 50px. Here's a rough illustration: ------------------------------- ...

csswidthpercentage

What can I do to prevent a scrolling div that exceeds the height of the div itself?

I'm trying to align an image to the right side with a fixed position and have a large text content on the left side. I want the text content to be scrollable using bootstrap. Here is my code snippet. Thank you for your time and any suggestions! &l ...

jquerycssbootstrap-4stickyscrollspy

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

javascripthtmlcss

What is the best way to transfer Django variables to HTML?

Looking to send data from the rs232 port and showcase it in a graph using javascript? Check out this resource: Seeking guidance on importing the views.py variable into my html file. views.py import io from django.http import HttpResponse from django.shor ...

pythonhtmldjangoserial-port

Enumerate the titles and URLs of YouTube videos extracted from HTML code

Currently, I am working on a Python 3.5 script that prompts the user for a title (such as a song), then searches for it on youtube.com/results?search_query=my+title and extracts the HTML code. While I have achieved this part successfully, I am encounterin ...

pythonhtmlvideoyoutube

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

I am encountering an issue with my dropdown menu not functioning properly in Internet Explorer 10, Chrome, and compatibility mode. Surprisingly, it works flawlessly in the latest version of Firefox. CSS: #menu_items { float: left; width: 600px; } #me ...

htmlcsswebkitgecko

What is the best way to create a border for the active class nav-item in Bootstrap 4?

I am facing an issue with changing styles in the nav-item. I have created a separate style sheet and added the necessary code to make the changes. Surprisingly, the changes are reflecting well in Internet Explorer but not in Firefox. Can anyone guide me on ...

cssbootstrap-4

Combining Java for the back-end and JavaScript for the front-end: a comprehensive guide

Looking for advice on integrating a Java back-end with a JavaScript, HTML 5 front-end in my web application. Any tips on passing content between the two languages? ...

javajavascripthtmlclient-server

What is the best way to choose and deselect a checkbox in Angular?

I'm currently working on an angular Todo list project where I'm tackling the challenge of implementing a select all and unselect all checkbox feature. todo.ts import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core&ap ...

angularhtml

The functionality of the Bootstrap carousel for moving to the next and previous images is malfunctioning, as it only

The carousel on my website is not functioning properly. It only displays the first image and does not slide to the next pictures as it should. Here is the code snippet for the carousel: <body> </nav> <div id="carousel1" class="carousel slid ...

javascriptjquerycsstwitter-bootstrap

Creating a mobile-responsive table using Bootstrap

I am struggling to make my bootstrap table more mobile-friendly. Despite trying various methods, I have not been satisfied with the results. I am interested in how others are successfully adapting their tables to look good on mobile devices while maintaini ...

jquerycsstwitter-bootstrapmobile

Why does my PHP script execute before receiving any input?

As a newcomer to PHP from C#, I am currently developing a whois module for a website. However, I'm encountering an issue where my PHP page automatically runs and displays the message "invalid input" before I even click the button. Can anyone explain w ...

phphtml

Achieving a full-height div using CSS and HTML to fill the remaining space

Here is the current layout structure I am working with: div { border: 1px solid } <div id="col_1" style="float:left;width:150px;">1</div> <div id="col_2" style="float:left;width:100px;">2</div> <div id="col_3" style="float:l ...

javascriptjqueryhtmlcss