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);
}
}
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);
}
}
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 ...
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! ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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& ...
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 ...
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 ...
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 ...
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 ...
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- ...
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; ...
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 ...
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 ...
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 ...
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 ...
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 ...