I have some text that I want to animate with a typewriter animation:
<h2 id="slogan">we make the web.</h2>
It has some simple css to animate its transform in steps, and has a ::before psuedo element to show the letters one by one, also with a stepped animation.
animation: type 2s steps(16) forwards 2200ms;
#keyframes type
{
to { left: 100%; }
}
This works exactly as intended on chromium based browsers, and firefox. But it doesn't animate properly on safari, it looks like it jumps in 2 steps instead of 16.
Here is a working and non-working video example.
This was tested on:
Microsoft Edge 91.0.864.48 (working)
Google Chrome 91.0.4472.106 (working)
Firefox 88.0.1 (working)
Safari 15.0 (17612.1.15.1.14) (NOT working) - tested on the first dev beta of macOS Monterey
Safari iOS (NOT working) - tested on the first dev beta of iOS 15
I am open to the idea that this issue might be because of the beta software, and would therefore want other devs to test on different versions of safari and share the results.
If you know what causes this, I would really appreciate you taking the time to explain the matter.
All help is welcome, and thank you for your time.
I have this problem too, seems iOS 15.1 resolved it, but you could try to replace the animation with transform.
#keyframes type {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
Related
The Problem
I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.
They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.
What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.
Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.
Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?
Code
Here's the code for how the transitions are handled, they are quite simple:
NOTE: browser prefixes excluded for brevity.
jQuery('.fade-up').one('inview', function() {
jQuery(this).removeClass('no-display');
jQuery(this).addClass('animated fadeInUp appear');
});
And the transitions themselves:
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
animation-name: fadeInUp;
}
Related to this question: Android Holo loading spinner in CSS I have noticed that the accepted answer's first example, the one with images, doesn't work on chrome (i just see a static grey ring) while it works on Firefox and IE 11.
Even though the purpose of the question was to make a spinner without images and both are very nice I find the first one slightly better looking (on firefox, that is) and i'd like to use it but I don't know why it doesn't work on chrome and I want to know if there's a fix, both for future references (so i know what to avoid and/or how to fix it) and to know if I must stick to the one without images
My Chrome version is 42.0.2311.90 (32-bit)
Since i assumed both spinners were correct i didn't realize it was missing the webkit-keyframes property. Today i watched once again the css and noticed by chance that the css spinner had it while the image-based spinner didn't. Adding this to the image based spinner css worked
#-webkit-keyframes rotate-outer {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(1080deg);
}
}
#-webkit-keyframes rotate-inner {
0% {
-webkit-transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
I'm making a website with a lot of css transform (rotate:45deg) but i have few issues with blurry text/images.
I did a jsfiddle with an example.
http://jsfiddle.net/4pjsh/
In Chrome, i added "hardware acceleration" to fix the blink/crappy effect during animations but images and text are now always blurry. I searched and tryed lot of things but can't find a way to have them clean.
In Firefox 27-, it works fine but since mozilla released firefox 28/29, when blocks are animating, images are blurry.At the end of the animation, they come back clean.
Somebody knows how to fix that? if it's possible...
Thanks
I removed all rotates, and "started over". Somehow I got rid of the blur in chrome at least.
http://jsfiddle.net/4pjsh/6/
So right now, I'm only rotating like this:
.gridd .item {
-webkit-transform: rotate(45deg);
}
.gridd .zonelogo img {
-webkit-transform: rotate(-45deg);
}
.gridd .item .blockMore p { //You don't need to be this specific
-webkit-transform: rotate(-45deg)
}
Sorry, only had time to do the -webkit ones :)
I'm working on a web page that uses a lot of CSS animations (mostly TranslateY) that are triggered at various scroll positions through JQuery. It works great across Webkit, FF, IE, etc. Unfortunately, on iPhone and iPad, some (but not all) of the elements just don't appear. I'm aware of the differences of 'scrolling' on mobile versus desktop and have confirmed that the class being added to fire the animations is actually getting added.
I plugged the iPad into my desktop and have been using Safari's Mobile Web Inspector to poke around... what's really weird is that I have confirmed that the animations are firing and the divs are moving around, they just aren't visible... UNTIL I add a line of style to the div in the inspector. As soon as I start typing anything, literally even just a blank line, the element appears! This has me totally stumped. I've tried adding a z-index but don't know what else to do.
I'm using Safari 6.1.1, the latest version as of this writing. Also, turning off overflow:hidden; on the parent container has helped, but unfortunately, I need overflow:hidden; for this application.
Any help is appreciated, thanks -
This is how I add the class for the animation:
function getTopHeight() {
return (document.body.scrollTop) ?
document.body.scrollTop :
document.documentElement.scrollTop;
}
$(window).scroll(function() {
// Manage animations on scroll on the 'our story' page.
if (getTopHeight() >= 442){
$('.tree-1').addClass('popup-animation');
} ...
And these are some CSS rules I have surrounding that animation:
.tree-1{
transition: all 0.5s;
-webkit-transition: all 0.5s; /* Safari */
-moz-transition: all 0.5s; /* FF */
}
.popup-animation{
-ms-transform: translateY(-330px);
-webkit-transform: translateY(-330px);
-moz-transform: translateY(-330px);
}
Following some of the solutions on this somewhat related SO question, I was able to solve my problem by adding:
-webkit-transform-style: preserve-3d;
... to the elements being translated.
Can anyone help me make this Chrome CSS code cross platform? It doesn't work properly in Firefox or at all in IE8. I really appreciate the help, thanks for reading.
.revision-span-in {
opacity: 0;
}
.revision-span:not(.revision-span-out) {
transition: 1s;
-webkit-transition: 1s;
}
.revision-span-out {
position:absolute;
opacity: 0;
}
EDIT - Here is the page with the code suggested below, where the issue persists in Firefox. All text on the page should fade in at intervals, but sometimes random parts are appearing without the fade. If it works fine the first time, try refreshing and you'll see what I mean. The page is an output from Twine, and the modified CSS is right at the bottom. Thanks again.
Example HTML page with inconsistent fade ins in Firefox
You just need to throw some browser vendor-prefixes in there.
Based on the current support of transition, you just need -webkit, -moz, and -o:
.revision-span-in {
opacity: 0;
}
.revision-span:not(.revision-span-out) {
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
}
.revision-span-out {
position:absolute;
opacity: 0;
}
You won't have support in IE9 and lower.
Usually for these experimental features (so in general, if you're not sure about it, look it up) it's best to look up if it's supported by the browser. Since transitions are not completely supported by all major browsers, you need to add the prefix for all browsers that don't fully support it yet. So, according to MDN's Browser support list, and Statcounter's browser usage stats, you should have the following:
.revision-span-in {
opacity: 0;
}
.revision-span:not(.revision-span-out) {
transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}
.revision-span-out {
position:absolute;
opacity: 0;
}
Since both webkit browsers don't have a generally used version that doesn't fully support it without prefix, and firefox doesn't need a prefix, this should work. The problem you're having shows that you've not updated your firefox in a while, and if you're going to test how your site looks in other browsers, I strongly suggest making sure you've got the up-to-date version. Firefox already supports the syntax without -moz- prefix since version 16, and it's at version 26 now (with 25 being the most commonly used at the moment).
Of course if you really want to support even the browsers that almost nobody even uses anymore due to automatic updating (such as Firefox <16), you should indeed like Zach Saucier (deleted his answer) JoshC says also include the -moz- prefix. The -ms- prefix is not needed at all though, since every version of IE that does support transitions also supports it without needing that prefix.
EDIT: added -webkit- for Android/Blackberry default browser.
Extra bit (after seeing added dropbox link)
Considering the dropbox link, what I think is causing it is this: Firefox is still animating the first element when the second shows up, so it doesn't restart the animation.
This could explain why it happens randomly: it only happens when Firefox has a few milliseconds of lag, and firefox continues playing the animation for the second item from the starting point of the second animation. This is likely caused by the fact that your items are nested, so the animation of the first row would be inherited by the animation of the second row, and so forth.
Since your animation length is 0.5 seconds exactly, and the interval between showing elements is also 0.5 seconds exactly, if there is the slightest bit of lag this cause these problems. I suggest putting a tiny extra space between showing each element (perhaps 10 or 50ms or so), or changing the items from a nested method to a sibling method. So, instead of this:
<div class="body content">
<span class="first">500ms
<span class="second">500ms
<span class="third">500ms
<span class="fourth">500ms</span>
</span>
</span>
</span>
</div>
Use this:
<div class="body content">
<span class="first">500ms</span>
<span class="second">500ms</span>
<span class="third">500ms</span>
<span class="fourth">500ms</span>
</div>
So, instead of appending the spans to the current span, append it to the parent element .body.content. I would give you a demo, but your script looks really quite complicated (probably because it's generated by something), so you'll have to try doing that yourself. You could also try putting a tiny bit of extra space between each item's animation starts and see if that fixes it.
Once again I am going to tell you that css3 is still work in progress.So if you want to invoke the css rules then use the vendor prefix provided by their browsers.Note that Internet Explorer 9, and earlier versions, does not support the transition property.
-moz- for firefox use
-webkit- for safari and chrome because both uses the same browser engines
-ms- for microsoft
-o- for opera
.revision-span-in {
opacity: 0;
}
.revision-span:not(.revision-span-out) {
transition: 1s;
-webkit-transition: 1s;/*for chrome and safari*/
-moz-transition: 1s;/*for firefox*/
-ms-transition: 1s;/*for ie*/
-o-transition: 1s;/*for opera*/
transition: 1s;
}
.revision-span-out {
position:absolute;
opacity: 0;
}