CSS animation not always starting in iOS 8 Safari - html

I've made a slideshow that works by putting three inline blocks next to each other (all with the same background-image) within a slideshow container, and using translateX to move that container 33% of the way to the left/right, before looping. The three inline blocks pretty much ensures it will always look continuous and you never see a seam at the each of your screen.
The slideshow is placed into another container of its own, typical width, and overflow: hidden is used to crop the long photo strip and prevent it from stretching your browser window.
#container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.slideshow {
position: absolute;
z-index: 5;
top: 0;
width: auto;
height: 100%;
overflow: hidden;
white-space: nowrap;
}
.slide {
display: inline-block;
height: 100%;
}
#about-slideshow {
right: 0;
-webkit-animation: slideshow-right 10s linear infinite;
animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
width: 964px;
background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
background-size: 101%;
}
/* the animation */
#-webkit-keyframes slideshow-right {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(33.33333333333%);
}
}
#keyframes slideshow-right {
from {
transform: translateX(0);
}
to {
transform: translateX(33.33333333333%);
}
}
My problem: After looking at it thoroughly on an iPhone 5S and iPhone 6 Plus, it seems to not start sometimes. It'll just sit there. Maybe glitch out after a while. If I continue to refresh, it will sometimes run, and sometimes not. Seems completely inconsistent.
Any ideas on what could be causing this? Seems pretty simple.
Here's a CodePen that I've confirmed displays the issue on iOS Safari: http://codepen.io/arickle/pen/pvGJBM
Here's a full screen view to pull up on an iOS device for testing (remember, keep refreshing until it stops--you don't have to refresh particularly fast or anything): http://codepen.io/arickle/full/pvGJBM/

Well, I appear to have stumbled upon a workaround at least. Apparently, if mobile Safari hiccups on anything during load, or can't keep up, or something, it won't start the animation. My solution was simply to delay the animation by 0.1s. This gives the browser enough time to get everything loaded and then start the animation, every time.
-webkit-animation: slideshow-right 10s 0.1s linear infinite;
Silly.

Related

Repeating CSS animation runs smooth but jumps/flickers once at 1/4 intervals

I have a looping marquee effect created using CSS text-shadow. Basically the phrase in the h1 is repeated 3 more times in a row. The animation runs from 0% to 100%, then repeats.
The included example works, however when I view on my iPhone each 'group' of text jumps/flickers once.
I find this difficult to explain but if you think the text is rendered 4 times, 1 on the page and another 3 with text-shadow. So positioned at 0%, 25%, 50%, 75% of the with of the container. It seems to jump/flicker at each of these points, then run smooth until it hits the next.
I have tried various common 'fixes' for this...
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
As well as trying some suggestions such as adding animation-delay: 0 a animation-fill-mode and -webkit-perspective: 1000 but none of them show any improvement.
I have tried each of the above in isolation, combinations and adding all of them on everything.
Can anyone help with this? Is it to do with the text-shadow, that's the only thing I can think of? As it's strange it jumps at roughly 1/4 intervals when the animation runs to/from 0% to 100%. So nothing changes within that?
I'm using iPhone X, Software Version 15.5. Also does the same in Chrome.
:root {
--color-primary: black;
}
.wrapper {
max-width: 1000px;
}
.marquee {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.marquee h1 {
animation: var(--marquee-duration) linear infinite 0s forwards running marquee;
text-shadow: var(--marquee-width) 0 var(--color-primary), calc(var(--marquee-width) * 2) 0 var(--color-primary),
calc(var(--marquee-width) * 3) 0 var(--color-primary), calc(var(--marquee-width) * 4) 0 var(--color-primary);
white-space: nowrap;
width: var(--marquee-width);
-webkit-backface-visibility: hidden;
}
#keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
<div class="wrapper">
<div class="marquee" style="--marquee-width: 640px; --marquee-duration: 6.4s;">
<h1 class="page-title">Hello... is it me you're looking for?</h1>
</div>
</div>

CSS Animation Spin - Not Spinning in Place Anymore

I have an image then I have applied the following style rules to:
.spinner {
position: absolute;
width: 600px;
height: 600px;
-webkit-transform-origin: 50% 50%;
-webkit-animation:spin 14s linear infinite;
animation:spin 14s linear infinite;
}
#-webkit-keyframes spin { 100% {-webkit-transform: rotate(-360deg);} }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}}
In my IDE, this works perfectly fine. I then published a page to the web about 6 months ago. I loaded the page, and it worked as expected. Actually things were good, no problems or anything for all those 6 months. Then a few weeks ago I noticed a strange development -- the rotation behavior changed. I was bewildered because this page, and indeed, the entire site is static. There have been no updates to the master css file or anything for that matter that could possibly interfere with the style rules that I posted above.
Specifically what changed was instead of the image rotating in place at its center, the image now rotates about its original center position. The easiest way to imagine the change in behavior is comparing it to a clock. The center of the clock doesn't move as the hands rotate. However the minute hand and hour hands do (namely the ends of the hands that point to the time). That is what my image is doing now. It's now moving across the x and y dimensions in pixel space when it is not supposed to. It's supposed to rotate in place, staying still. There should be no movement in x or y.
I said to myself, "well this is just impossible," and thought the problem would go away by itself just as mysteriously as it came. Unfortunately it persisted for a few weeks, so I feel compelled to deal with it. Despite the absence of style rule clashes, I added !important to all the style rules that I posted above for the .spinner class as well as the #keyframes out of scope as well. This didn't help.
Now I'm starting to think it could be a browser issue? I'm using google chrome; only google chrome, I didn't include any -moz, I won't need to. My only guess is that the browser updated itself and started handling these animations differently?
Question: Why would animation:spin change spinning behavior? Is this symptomatic of some other looming issue? Is there anything I can do to make my rules more robust, other than add !important?
Chrome version: 64.0.3282.186
Update After what seemed like a billion trial and errors, I found that by setting:
.spinner {
-webkit-transform-origin: 15% 0%;
}
The image started to spin in place like it used to. Still begs the question what happened...
I examined the image to see if it's dimensions had changed somehow, but things look normal.
A bit late at 2021.5 But may be helpful for somebody. In my case it was because I removed :
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
and then caught that. All the followings were untouched ,the css were:
#overlay {
display: none;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
z-index: 99999;
}
.myblock {
display: inline-block;
vertical-align: center;
horiz-align: center;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
transform-origin: center center;
-moz-transform-origin: center;
width: auto;
height: auto;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
html:
<body>
<div id="overlay">
<div class="myblock" style="background-color: transparent; background-blend-mode: unset">
<img src="/images/corona.png" width="150px" height="150px" style="background-blend-mode: unset"
alt="this slowpoke moves"/>
</div>
</div>
....//other divs
</div>
</body>
the js part:
function spinIt(gironPrm) {
if (gironPrm === true)
$("#overlay").css('display', 'flex')
else
$("#overlay").css('display', 'none')
}
I have no idea no care of its science and no time to figure out why it happened to me,
but its so as it is

How do you do slide in from the left and right web page transitions using CSS?

I created page transitions for sliding in from the right and from the left using CSS similar to this (Below). I got the idea from MDN CSS Animations.
/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
*/
.slidein-from-right {
animation: slidein-from-right 500ms;
}
#keyframes slidein-from-right {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
.slidein-from-left {
animation: slidein-from-left 500ms;
}
#keyframes slidein-from-left {
from {
margin-right: 100%;
width: 300%;
opacity: 0;
}
to {
margin-right: 0%;
width: 100%;
opacity: 1;
}
}
This works well for pages sliding in from the right. However, sliding in from the left does not work (because the containing div is float left). I tried absolute positioning and other things for slide in from the right and slide in from the left page transitions, but there is always something wrong. For example, float right causes elements to be too far to the right. With other options I can't get the page centering, margins, and padding to be correct.
What is the best way to do this? Supporting just modern browsers is fine.
You can use jquery mobile page transistions, which are great.
Or you can use CSS transformations like this. Don't mess with the design layout of your page. Just transform it! Please note that as of this writing, CSS transforms are experimental, but test out well in recent browsers (FF29, Chrome 35 and IE11).
/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
*/
.slidein-from-right {
-webkit-animation: slidein-from-right2 500ms;
}
#-webkit-keyframes slidein-from-right2 {
from {
opacity: 0;
-webkit-transform:translateX(100%);
}
to {
opacity: 1;
-webkit-transform:translateX(0%);
}
}
See working example at this plunker: http://plnkr.co/edit/EUPuHN. (If you want to rip the CSS code, copy it from the plunker... it has all the vendor prefixes)

How to make a horitonzal sliding infinite animation using CSS?

I'm trying to make an infinite horizontal slider with 3 rows of images.
It looks like this:
But as you see when the end of the rows of images arrive, there's a huge blank space while the image finally appears again.
You can test it live here: http://jsfiddle.net/tbergeron/q596y/6/
Here's the CSS behind it:
ul.lists {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
-webkit-animation: moveSlideshow 180s linear infinite;
-moz-animation: moveSlideshow 180s linear infinite;
}
ul.lists li {
list-style: none;
display: inline-block;
}
ul.lists li img {
display: inline-block;
width: 100px;
height: 100px;
}
ul.slider2 {
top: 140px;
}
ul.slider3 {
top: 280px;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-300%);
}
}
#-moz-keyframes moveSlideshow {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-300%);
}
}
What I'd like to happen is to never see that blank space, I would like it to roll on forever. Anyone has an idea on how to achieve this behavior?
Thanks and have a nice day.
basicly , You need to clone your elements.
At least many enough of the first ones to fill the entire width of the screen, or split into two differents tags, your elements.
So once a part of them, is gone left, you move them back to the right end to fill that empty space to keep scrolling without any gaps.
Your case requires javascript.
So many images wrapping line by line needs to clone the whole ul.
A good compromise could be to split content within two ul, so one can to next once of screen.
To duplicate the whole ul in the HTML document might not be a good idea and i would not advise to do so for text.
jQuery DEMO of your fiddle.
$(".lists.slider1").clone().appendTo("body");
$(".lists.slider2").clone().appendTo("body");
$(".lists.slider3").clone().appendTo("body");
But for small "marquee like" , you can use pseudo elements to clone the first few images.
For text of a known length(em) or known container's width , you may use text-shadow.
Pseudo and text-shadow avoid duplication of content.
Some horrible CSS example that demonstrate the cloning idea: http://dabblet.com/gist/5656795

Marquee doesnot scroll smoothly, need 100% smooth scroll for marquee

I am using marquee scroll from right side to the left. The below code works fine. But its not scrolling smoothly. The content "Hover on me to stop" is blinking or flashing. I need a 100% smooth scroll for the below marquee. Please help me. Whether it is possible without javascript??
<marquee behavior='scroll' direction='left' scrollamount='3' onmouseover='this.stop()' onmouseout='this.start()'>Hover on me to stop</marquee>
If you wish to try it using pure CSS then this is the easiest approach. Though you need to check the support for older browsers and do add vendor prefixes.
.marquee-parent {
position: relative;
width: 100%;
overflow: hidden;
height: 30px;
}
.marquee-child {
display: block;
width: 147px;
/* width of your text div */
height: 30px;
/* height of your text div */
position: absolute;
animation: marquee 5s linear infinite; /* change 5s value to your desired speed */
}
.marquee-child:hover {
animation-play-state: paused;
cursor: pointer;
}
#keyframes marquee {
0% {
left: 100%;
}
100% {
left: -147px /* same as your text width */
}
}
<div class="marquee-parent">
<div class="marquee-child">
Hover on me to stop
</div>
</div>
A little late to the party..
There's an angular directive for this: https://github.com/davidtran/angular-marquee. You don't touch any js - just add the directive tag and you're done
<div angular-marquee></div>
And it doesn't fall back on the "deprecated tag" argument, relying on modern solution