The issue of CSS transform scaleX with opacity not functioning correctly in Safari

Check out the code here.

In Safari on Mac or iPhone, when using scaleX with opacity in a background image, it doesn't work. To fix this issue, we can use scale or scale3d(sx,sy,sz). But why does this happen? Is it a bug specific to Safari?

@keyframes scale-not-work-in-iphone {
    0% {
        transform: scaleX(1);
    }
    99% {
        opacity: 0;
        transform: scale3d(2, 2, 2);
    }

    100% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }
}

Answer №1

I believe the issue may stem from not utilizing prefixes for webkit. It might also be beneficial to set the opacity at 0% just to ensure it is being applied correctly. I hope this explanation proves helpful.

@keyframes scale-should-work-in-iphone {
    0% {
      opacity: 1;
      -webkit-transform:scaleX(1) scale3d(2, 2, 2);
      -moz-transform:scaleX(1) scale3d(2, 2, 2);
      -ms-transform:scaleX(1) scale3d(2, 2, 2);
      -o-transform:scaleX(1) scale3d(2, 2, 2);
      transform: scaleX(1) scale3d(2, 2, 2);
    }
    99% {
      opacity: 0;
      -webkit-transform:scaleX(1) scale3d(2, 2, 2);
      -moz-transform:scaleX(1) scale3d(2, 2, 2);
      -ms-transform:scaleX(1) scale3d(2, 2, 2);
      -o-transform:scaleX(1) scale3d(2, 2, 2);
      transform: scaleX(1) scale3d(2, 2, 2);
    }

    100% {
      opacity: 0;
      -webkit-transform:scaleX(1) scale3d(0, 0, 0);
      -moz-transform:scaleX(1) scale3d(0, 0, 0);
      -ms-transform:scaleX(1) scale3d(0, 0, 0);
      -o-transform:scaleX(1) scale3d(0, 0, 0);
      transform:scaleX(1) scale3d(0, 0, 0);
    }
}

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

Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app Found this spinner example: https://codepen.io/z-/pen/OPzNLz spinner.component.html import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

Three divs are set in place, with two of them of fixed width while the third div is

Looking for a layout with specific positioning and fixed widths: One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space. Any suggestions are appreciated. Thank you! ...

jQuery iScroll: The scrolling feature does not stop when reaching the end of the content

Recently, I've been utilizing iScroll for horizontal scrolling on a list. At first, everything seems to be working fine, but as I scroll towards the end (right to left), the content reaches its conclusion yet the scrolling continues beyond that. I&apo ...

reactjs dynamically adjusting background image size based on window dimensions

I'm tackling a ReactJs project at the moment. How can I adjust the background image to resize based on window size, particularly when toggling the device toolbar? .container{ background: url('../image/2.png'); } Currently, the backgrou ...

Issue with Chrome styling of li and a elements persists after link click

In my current project, I am facing an issue with my menu displaying differently in Firefox and Chrome. When clicking on the links in Chrome, they tend to move around, disrupting the styling of the menu. A common suggestion I found was to use display: block ...

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

Firefox is blazing its own trail by rising to the top while other browsers are

Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)? The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it ...

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

Implement JQuery UI Accordion to enhance navigation on mobile devices

I am implementing the JQuery UI Accordion to expand content on a website. Below is the basic markup structure: <div class="accordion"> <h2>Heading</h2> <div>Content</div> <h2>Heading</h2> <div& ...

"Struggling with the height of Bootstrap row not filling the entire space

I've tried everything but nothing seems to be working. Whether it's a simple height: 100% or experimenting with flex-grow: 1, none of it is doing the trick. I'm having issues with this site I'm currently working on: https://i.sstatic.n ...

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

Navigating vertically using CSS letters is an effective way to

I'm brand new to this and I'm attempting to create a vertical navigation menu where the links and letters are also positioned vertically. Although I've managed to make everything vertical, I am now facing an issue with the links getting squi ...

Create a 3D vertical flip effect for images using CSS

Learning About HTML <div class="container"> <div class="wrapper"> <div class="im-fix"><img src="foo.jpg"></div> <div class="img-closed"><img src="foo-close.jpg"></div> <div class="img- ...

Groupings of CSS style declarations

I am currently learning CSS and I have a question that may seem basic or silly, but I can't seem to find the answer anywhere. Here is the CSS code I am working with: #table-of-contents ol { list-style-type: none; counter-reset: item; margin: 0; ...

Images for navigating forward and backward in a jQuery datepicker

I'm experimenting with setting custom images for the previous and next month buttons. I attempted to utilize the prevText / nextText options of the datepicker in order to include a span with my own CSS class definition. However, this resulted in the c ...

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

I'm faced with a dilemma on my HTML page. In the middle of the content, there's a div that contains 4 links with images and text inside. What I'm looking to achieve is for each link to trigger a complete change in the div when clicked, with ...

Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag. However, when I set the option to TRUE, it creates a ...

Using Previous and Next Buttons in Bootstrap Tabs for Form Navigation

I am currently facing a challenge in splitting a form into multiple tabs and encountering issues with the next and previous buttons on the second and third tabs. My goal is for the tabs at the top to change state as you cycle through them by clicking the ...

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

I have a unique banner ad that I want to display as the footer on my responsive website. Using media queries recommended in the advertising documentation, I am adjusting the size based on different screen widths. Check out the CSS code below: <style&g ...