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
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 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 can't figure out what's going on here.
I was updating a site that still had a marquee tag in use, so I replaced with a much smoother (though, still a marquee) css animation:
Problem is that it works fine in chrome and firefox, but is inconsistent in safari. Sometimes it loads, sometimes it doesn't. Also seems to not load more often when coming to the homepage via a link on the site vs a hard reload.
Is there anything loading that could interfere with the animation? Any ideas why it wouldn't work on some loads?
The page it's happening on is http://www.peacenow.com and the CSS I'm using is:
.marquee span {
position: absolute;
left: 0;
top: 0;
width: 7500px;
-webkit-animation: moveSlideshow 165s linear infinite;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
Try looking at Safari's methods for animation. Alternately I'd try using a more cross browser compatible method like jQuery.
jQuery is your best option if you take into consideration todays browser user-base, and compatibility between them. Look into jQuery .animate() for more information.
<script>
$('.marquee').marquee(); // The code to start a simple marquee in JavaScript's jQuery Marquee Plugin
</script>
and you'll need the jQuery and Marquee Plugins loaded by downloading them from jQuery and jQuery Marquee and then link them with <script src="/path/to/script.js"></script>
JSFiddle Example
P.S. This does work on my Androids 2.3 browser from 4 years ago where as the basic animation doesn't from your website. And let's face it, not many web surfers are actually sitting at a computer anymore.
I think there are two ways you can address this issue for Safari.
The first is using JavaScript to kickstart your animation.
Using Charles proxy, I manipulated the response so that this:
<p class="marquee" id="countries">
became this:
<p class="marquee-pre" id="countries">
Then, I injected the following JS at the bottom of the page:
<script>
$('.marquee-pre').attr('class', 'marquee');
</script>
which immediately addressed the issue.
If you don't mind adding JS to your page, I would recommend this approach.
If you can't add JS, or prefer not to, I found making the following change to the CSS animation also worked:
.marquee span {
-webkit-animation: moveSlideshow 165s linear infinite;
}
to:
.marquee span {
-webkit-animation: moveSlideshow 165s steps(10000) infinite;
}
While this works, I found it wasn't as "smooth" as using linear timing...
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.
I am trying to get the "tilt-in" animation working on a little project of mine using CSS animations. Unfortunately I have not been able to port it from the MS Demo where - doubtlessly all the code is there: http://m.microsoft.com/windowsphone/en-us/demo/default.aspx#home
I'm trying to get the tiles to fade in when the page is loaded, just that part. Once is absolutely fine. I understand that I need to define the vendor keyframes, but my attempts have been so poor that I am not pasting them in my example in jsFiddle:
http://jsfiddle.net/qCQQD/2/
Anyone out there who'll help me out? That would be beyond awesome!
EDIT 1:
a) I'm still trying to get the rotateRight animation running when the page is loaded. I've probably got a hacky version with leftRotate in the .tile class and that removed (and rightRotate added) on pageload.
b) This
.tile:active {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
-o-transform: scale(0.97);
-ms-transform: scale(0.97);
transform: scale(0.97);
}
got super slow in Chrome because of the code added, how can I get it back to normal?
I suspect it takes some sort of timeframe from the #tile
-webkit-transition: 300ms 160ms;
It looks like a slow motion right now. I'm going to try adding something like -webkit-transition: 50ms to it. (yeah I know, total noob).
Basically like this. You have it set up fairly correctly, but you just need to actually change some settings. Check this jsfiddle DEMO out.
I'm only using javascript to add a class or remove a class. You could simply do that sort of stuff on a :hover tag in css also it would do the same thing.
I mainly just modified your css to include a rotate(90deg) -webkit-transition. Therefore this will only work in chrome and probably safari. If you want it to work in firefox then you'll have to do the -moz-transition for the rotation.