Troubleshooting problems with rotate3d() in Safari on iOS

There seems to be an issue in Safari iOS version with the transform: rotate3d()

I am testing it out using this HTML code

<span class="safari-box"></span>

For instance, when I use the following code, the animation is visible

/* test */
.safari-box {
    width: 100px;
    height: 150px;
    background-color: $color-principal;
    display: block;
    margin: auto;
    border-radius: 20px;
    animation: safari-box-animation 2s infinite;
    animation-timing-function: linear;
}

@keyframes safari-box-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate3d(1,.5,1, 180deg);
        transform: rotate3d(1,.5,1, 180deg);
    }
}

However, as soon as I increase the rotation degrees, the animation stops working

/* test */
.safari-box {
    width: 100px;
    height: 150px;
    background-color: $color-principal;
    display: block;
    margin: auto;
    border-radius: 20px;
    animation: safari-box-animation 2s infinite;
    animation-timing-function: linear;
}

@keyframes safari-box-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate3d(1,.5,1, 1080deg);
        transform: rotate3d(1,.5,1, 1080deg);
    }
}

Does anyone have any insights into what might be causing this issue?

htmlcsssafari

Answer №1

Upon observation, it became apparent that an intermediate keyframe was needed for the 50% mark. To address this, I simply halved the value from 100% at the 50% mark.

.safari-box {
    width: 100px;
    height: 150px;
    background-color: red;
    display: block;
    margin: auto;
    border-radius: 20px;
    animation: safari-box-animation 2s infinite;
    animation-timing-function: linear;
}

@keyframes safari-box-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate3d(1,.5,1, 540deg);
        transform: rotate3d(1,.5,1, 540deg);
    }
    100% {
        -webkit-transform: rotate3d(1,.5,1, 1080deg);
        transform: rotate3d(1,.5,1, 1080deg);
    }
}
<span class="safari-box"></span>

Witness the animation in action on Safari PC here.

See how it performs on Safari iPhone 11 Pro in this video.

This instance is set up on my webserver for convenient testing on your Apple device.

Try it out here: https://refuzion.nl/uploads/test.html

If this doesn't align with your requirements, feel free to provide feedback for further assistance.

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

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

There seems to be an issue with the code below - it works fine initially, but as soon as I tweak the height values for .Image, it stops functioning as expected. The test image starts overflowing instead of staying hidden, and no matter how many times I a ...

htmlcss

Steps for setting up a barcode scanner on a smartphone (both iPhone and Android) using zxing in an html app

After reviewing different answers to my questions, I decided to try out some solutions below. The app and camera function properly on Android devices, but not on iPhones. What steps should I take? <!DOCTYPE html> <HTML> <HEAD> <script ...

htmlzxing

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

javascriptcssmaterial-uinext.js

What is the best way to include Google Calendar in a div container while ensuring it is responsive?

I'm currently working on the layout of a website that features a slideshow of images at the top, followed by an embedded Google Calendar. I've encountered an issue with the responsiveness of the Google Calendar within its designated div container ...

htmlcssgoogle-calendar-api

What steps can be taken to resolve the issue of the Cannot POST /index.html error?

Here is an example of a calculator app created using HTML and Javascript. Upon running the program with nodemon and accessing localhost:3000, pressing the submit button triggers an error on Google Chrome. [nodemon] starting `node calculator.js` Server sta ...

javascripthtmlnode.js

audio enhancement in a web-based game

I'm having trouble getting a sound effect to play consistently in my game whenever there is a hit. Sometimes the sound plays, other times it does not! Here is the code I am using: <script> var hitSound = new Audio(); function playEffectSound ...

javascripthtmlhtml5-audio

A gap only appears in the drop-down navigation when the page is scrolled

After finally completing my first website, I encountered a frustrating issue. When scrolling down the page, a gap appears in the navigation bar, making it impossible to access the dropdown menus. I've been struggling to fix this problem on my own. Any ...

htmlcssnav

Located at the lower section of the parent container

In my flex container, I have two boxes arranged side by side (collapsing into one column on smaller screens). I've ensured that these boxes have the same height when displayed together, as shown in the image below: https://i.sstatic.net/ZjsfW.png No ...

javascriptjqueryhtmlcss

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it necessary to restart the IIS Site when altering the contents of index.html?

I am currently working on updating a website that runs on a Custom Designed CMS with files using the .asp extension. The site seems to be quite dated and is hosted on an IIS Server, which I do not have direct access to. The user has requested some changes ...

htmlcssiiscontent-management-system

There is an unnecessary gap between the parent div and the image contained within it

Snippet of HTML code showcased below: <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="style ...

htmlcss

locate the following div using an accordion view

Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/ There are various methods to achieve this, but one approach is by using a CSS class called sub to hide a 'nested' div and then using jQuery to toggle the Glyphicon while displaying the 'nest ...

javascriptjqueryhtmlcss

Creating trails by following the cursor's movement in KineticJS

Currently, I am working on a drawing application using KineticJS. While I have successfully used it to draw shapes and straight lines by following the method outlined in KineticJS - Drawing Lines with Mouse, I now need to draw a line along the mouse's ...

javascriptjqueryajaxhtmlkineticjs

Pressing the tab key while using Angular will halt any additional processes from running

I recently integrated a search bar into my Angular application. When I enter text in the input field, a customized dropdown menu appears below it. However, when I press the tab key, I expect the dropdown to close and for the focus to shift to the next inpu ...

htmlangular

The function 'find' cannot be invoked on an undefined object

I'm currently working on implementing objects in my jQuery code. So far, I have the following: var options = { ul: $(this).find('.carousel'), li: options.ul.find('li') } The li property is causing an error - Cannot call meth ...

javascriptjqueryhtml

Alignment of inputs remains stubbornly off-center despite floating left

My main goal is to have all my inputs aligned to the left for a clean and organized look, similar to the image provided below: https://i.sstatic.net/5c0mX.png Despite my efforts to float the inputs and paragraphs to the left, I am facing an issue where t ...

htmlcss

Position the div to align with just one side of the table-cell

I am struggling with making the height of my code dependent on only the left column, while still allowing the right column to be scrollable if it contains more content than the left column. Despite my best efforts, I can't seem to figure out how to a ...

htmlcss

steps for embedding a video with a URL

Here's a question for you: Is there an easy way to embed a video using just the URL, without having to deal with complicated 'embed codes' like <iframe src="http://player.vimeo.com/video/41406753?byline=0&amp;portrait=0" width="500" ...

htmlvideovideo-embedding

Determine if a link can be activated or disabled

Controlling the clickability of a link and displaying an error based on the result of an ajax call is my current objective. <a class="lnkCustomer" href="http://localhost/viewcustomer" target="_blank" data-customerno="2 ...

javascripthtmljqueryajax

Leveraging .Net ConfigurationManager.AppSettings in Cascading Style Sheets

I am facing an issue where I have a specific color key in my AppSettings for the company's brand color, which needs to be applied to a CSS class. The challenge is how to incorporate this key into my stylesheet. Is there a way to access the Configurati ...

c#cssasp.net-mvc