Yesterday our client reported strange and undesirable bahavior at his website. Website address is: http://dawidbukiel.pl/#offer, section "offer" (Oferta). It should work like this:
and it does, despite Safari.
After action
#offer > div > div:hover
box with offer details (.offerHover) should appear. At Safari, unfortunatelly, it happenes otherwise. Box sometimes appears, sometimes doesn't and sometimes appears with low opacity.
Main problem is - we don't have any mac device, so there is no way to try and fix it. Do you have any clue what might be wrong? I tried testing old Safari version on Windows, but it seems to be working fine.
I would be very grateful for any ideas :)
I managed to fix it myself.
I dunno why, but it works :D
I just had to get rid of keyframes.
from:
.offerHover {
background: rgba(0, 81, 203, 1);
height: 200px;
margin-right: 0px;
}
#offer > div > .col-md-4:hover .offerHover {
-webkit-animation: jumpOut 0.5s forwards;
animation: jumpOut 0.5s forwards;
opacity: 1;
visibility: visible;
}
to:
.offerHover {
background: rgba(0, 81, 203, 1);
height: 200px;
margin-right: 0px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#offer > div > .col-md-4:hover .offerHover {
visibility: visible;
-webkit-transform: translate3d(15px, 15px, 0);
transform: translate3d(15px, 15px, 0);
opacity: 1;
}
Related
I'm using a keyframes animation for a transformation. It works perfectly on desktop, but it acts extremely strange on mobile. I'm testing on Chrome on my Macbook and on Chrome on my iPhone X. Another user found the same issue on Safari on iPhone.
Basically, when the page loads, the animation doesn't play. The delay works, but the actual transition and fade doesn't happen. You can see what it should look like (from a computer) at asilhavy.com. It doesn't play on load, but if I go to a new page and select the back button, it will play after I scroll. So weird. The scroll bar is also weird when I go back after visiting a new page.
I'm suspicious that it might be something very wrong somewhere else in my code, but I don't know where. Any pointers on where to look are helpful. The full code is available at the link above, but here's the code I have now specifically for that animation. I've gone through a few other solutions, like setting display: block, using -webkit-, and avoiding shorthand animation.
Update: Through more debugging it appears ios and safari aren't rendering properly. The animation is technically playing, but the transition (ease) isn't following. They move, just not smoothly.
#-webkit-keyframes slide-in {
from {
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#keyframes slide-in {
from {
transform: translateX(-150%);
}
to {
transform: translateX(-50%);
}
}
.land-cont {
overflow: hidden;
position: absolute;
top: 30px;
left: 0;
height: 80px;
width: 250px;
}
.reveal-cont {
transform: translateX(-150%);
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 1.6s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
-webkit-animation-name: slide-in;
animation-duration: 0.6s;
animation-timing-function: ease;
animation-delay: 1.6s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: slide-in;
display: block;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: calc(50% - 50px);
background: rgb(32, 6, 6);
left: 50%;
z-index: 2;
color: #FFF;
z-index: 2;
background: -webkit-linear-gradient($gradient);
background: -o-linear-gradient($gradient);
background: linear-gradient($gradient);
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
opacity: 1;
}
<div class="land-cont">
<div class="reveal-cont">
<h2>Alicia</h2>
</div>
</div>
Finally fixed it. I can't point to one exact change, but I know this question was the one that got it working in the end. Turns out the problem was in iOS and Safari, not Chrome. Here's a list of changes I made:
Implemented proper use of -webkit-
Didn't use shorthand animation
Used display: block
Added animation class after page load
I'm not sure why that last one works, but it fixed it. If anyone knows why it worked please let me know.
Link to example. Hover over the book on the left side
As you can see, the book seems to open towards the user.
I already have the first part of the animation: JSFiddle
HTML:
<h1>Boek opendoen animatie</h1>
<div class="achtergrond">
<img class="foto" src="http://i.imgur.com/u19t6iW.jpg" alt="Cover">
</div>
</body>
</html>
CSS:
div.achtergrond {
background-color: black;
width: 250px;
height: 376px;
}
img.foto {
width: 250px;
height: auto;
-webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
/* -webkit-transform-origin: 0 0;*/
}
img.foto:hover {
/* -webkit-transform: scaleX(1.5)*/
-webkit-transform: matrix3d(0.8660254, 0, 0.5, 0, 0, 1, 0, 0, -0.5, 0, 0.8660254, 0, 0, 0, 0, 1);
}
Now this doesn't seem to enlarge the right corners of the book, so it doesn't seem like the cover is coming towards the user.
I've tried -webkit-perspective, transform-style,... but can't seem to get the desired effect.
try this css on image hover
transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
I found how I need to fix this.
I tried the perspective and perspective-origin options before but didn't put them in the correct place.
These options have to be put in the parent element (here the "achtergrond"-div).
See w3schools with the quote
When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.
The new CSS is thus:
div.achtergrond {
background-color: black;
width: 250px;
height: 376px;
-webkit-perspective: 250px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 100% 30%; /* Chrome, Safari, Opera */
}
img.foto {
width: 250px;
height: auto;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
}
img.foto:hover {
/* -webkit-transform: scaleX(1.5)*/
transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
}
Hello I wondering if there is a transition to make the purple div (the one that slides down when you hover over the feeling down? picture) bounce when it reaches the end?
here is the code- and jsFiddlle Demo link
HTML
<div class="img">
<div class="hover"><h2>project 1</h2></div>
</div>
CSS
.img {
width: 457px;
height: 288px;
background-image: url("http://i59.tinypic.com/xdulh2.png");
position:relative;
overflow:hidden;
}
h2 {
font-family: avenir;
font-weight: bold;
font-size: 40px;
color: #000;
}
.hover {
position:absolute;
top:-100%;
width: 457px;
height: 288px;
background: rgba(130,76,158,0.5);
-webkit-transition:all 1s;
}
.img:hover .hover {
top:0;
}
an example of the transition i mean you can see here http://www.ollygibbs.com
CSS Transition doesn't have bounce-style timing function, so we have to code it with CSS animation keyframes. The problem here is - how to easily decompose a bouncing ( or any other ) functions into a keyframe series over certain style?
This was the problem I encountered when I build transition.css, so I built a tool "easing.css" to help me generate keyframes from arbitrary equations.
The idea is simple; say we want to make a bounce effect:
we first make a timing function f(t) for our desired effect, such as
Math.abs(Math.sin(1.2 + (t ** 1.4) * 23)) * ( 1 - t ) ** 2.8
according to how the output of this function changes, we sampled this function with different interval from 0 to 1.
use the sampled (t, f(t)) pairs to generate the css animation keyframes.
apply the result animation when we need a transition.
with the concept above, easing.css also provides several timing function preset so you can play with. Below is a 15-frames bouncing animations generated via easing.css, you could make it more like a real bounce by increasing the frame count or tweaking the timing function provided:
.your-block {
animation: YourAnimation 2s linear 1s;
}
#keyframes YourAnimation {
0% { height: 7px; }
8% { height: 24px; }
10% { height: 36px; }
17% { height: 99px; }
19% { height: 83px; }
21% { height: 69px; }
24% { height: 57px; }
25% { height: 56px; }
27% { height: 59px; }
34% { height: 100px; }
36% { height: 88px; }
38% { height: 80px; }
48% { height: 100px; }
72% { height: 100px; }
100% { height: 100px; }
}
The animate.css library will give you a more complete setup and you can choose and pick the ones you need, but if you must code your own, use this code I included in a CODEPEN
Basically, you instantiate the bounce effect with the following crossbrowser code. This code establishes the bounce, speed of bounce, and the direction it will bounce. You can choose ease-out if you want to.
Now, Bouncing is a tricky thing. Because it must go up and down until it stops. so the bounces must gradually decrease the height. So, this is why you need #-keyframes, (notice you will need #-webkit-keyframes and #-moz-keyframes, etc for a more complete cross browser development. These keyframes allow you to break the effect at any point. In a bouncing effect in particular, the effect breaks every 10% by reducing it's position in the Y axis (which it means height), until it finally stops.
-webkit-animation: bounce 1200ms ease-in;
-moz-animation: bounce 1200ms ease-in;
-o-animation: bounce 1200ms ease-in;
animation: bounce 1200ms ease-in;
Hope that helps you.
p.s. my code looks a little buggy but you'll have a good enough start. I added your code in your fiddle to it too
Hey as previous suggested animate.css is pretty good with css animations, but to have more control over the animation you can add it with js. You just have to add an small script.
$('.img').hover(function(){
$('.hover').addClass('animated bounceInDown');
}, function() {
$('.hover').removeClass('bounceInDown');
$('.hover').addClass('bounceOutUp');
setTimeout(function() {
$('.hover').removeClass('animated bounceOutUp');
}, 1000);
});
Check out this fiddle example
After that, you just need to play with the values on the .bounceInDown .bounceOutUp keyframes annimation (if you want to).
So that the animation is more or less bouncy
#keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -800px, 0);
transform: translate3d(0, -800px, 0);
}
}
Another way (with jquery) of doing this will be using jQuery .animate and easing plugin.
<div id="example">
<p class="bounce"></p>
</div>
div {
width: 200px;
height: 200px;
background: red;
}
.bounce {
width: 100%;
height: 0px;
background: rgba(134,12,12,.4);
}
$('#example').on('mouseenter',function(){
$('p').animate(
{ height: "200px" },
1000,
"easeOutBounce"
);
})
[js fiddle example][1] [1]: http://jsfiddle.net/2ra7yumo/2/
It gives you little bit more(or easier) control on the animation.
It appears both IE 10 and Firefox snaps elements to whole pixels when animating their position using translate 2d transform in a css keyframe animation.
Chrome and Safari does not, which looks a lot better when animating subtle movements.
The animation is done the following way:
#keyframes bobbingAnim {
0% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
}
Here's an example of what I mean:
http://jsfiddle.net/yZgTM/.
Just open it in Chrome and IE 10 (or Firefox) and you should notice the difference in smoothness of the motion.
I realise there might be many factors affecting this behaviour such as if the element is drawn with hardware acceleration or not.
Does anyone know of a fix to try to force browsers to always draw the elements on subpixels?
I found this similar question, but the answer was to animate using a translate transform, which is exactly what I'm doing:
CSS3 Transitions 'snap to pixel'.
Update:
After playing around a bit I found a fix for Firefox, doesn't do anything in IE 10 though. The trick is to scale down the element ever so slightly and use translate3d with a 1px offset in the Z-axis:
#keyframes bobbingAnim {
0% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
50% {
transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
animation-timing-function:ease-in-out
}
100% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
}
I love your question!
Good job in noticing the pixel-snap in firefox and IE10.
I've researched this subject a while ago and I advise you to check the GSAP forums, as they contain a lot of useful information on web animations.
Here's a topic regarding IE10 pixel-snap issue.
What you need to do is add a minimal rotation to the element. This is so IE and Firefox will redraw it in a different way - which will stop pixel-snap for good :)
Tyr this:
#keyframes bobbingAnim {
0% {
transform: translate(0px, 0px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
}
#Nemanja is correct you will find that if you tweak the speed you will see better results this is fairly typical with css animations. Also it doesn't really make a difference in this case if you enable hardware acceleration. I tidied up the code a little bit and ran it without any issues, i do not have ie10; However, I have 11. You may have to just remove the second transform of translateZ if it doesn't run in 10
body {
background-color: #ccc;
}
.bobbing {
position: absolute;
animation: bobbingAnim ease-in-out .5s infinite;
-moz-animation: bobbingAnim ease-in-out .5s infinite;
-webkit-animation: bobbingAnim ease-in-out .5s infinite;
}
.bobbing.text {
font-size: 50px;
color: #000;
left: 30px;
top: 30px;
}
.bobbing.image {
left: 30px;
top: 150px;
background: url(http://placehold.it/300x100/aa0000&text=Bobbing+image) 50% 50% no-repeat;
width: 310px;
height: 110px;
}
#keyframes bobbingAnim {
50% {
transform: translate(0, 12px) translateZ(0);
}
}
#-webkit-keyframes bobbingAnim {
50% {
-webkit-transform: translate3d(0, 12px, 0);
}
}
#-moz-keyframes bobbingAnim {
50% {
-moz-transform: translate3d(0, 12px, 0);
}
}
There cant be half a pixel movement, there is no such thing.
Your problem is the speed and smoothness of the animation, not the "pixel snapping".
Ever since I added a css transition (first one was on hover, second was an animation) it seems to have messed up my fonts, they look 'different'.
It's totally bizarre, I've looked for hours and can't find anything on it, nor can I figure out exactly why it's happening.
It seems to be ok in firefox, but safari and chrome are having problems.
http://www.simplerweb.co.uk
Everything below the gear animation at the bottom left seems to look like a lighter font weight and the navigation menu seems to look the same.
I am totally lost on this one.
Here's the CSS for the animation.
.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
-webkit-animation-name: backrotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: backrotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes backrotate {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes backrotate {
0% {
-moz-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
I think I had a similar issue, and what fixed it for me was adding
-webkit-font-smoothing: antialiased;
to my body css. When animation of any kind happens, webkit tries to antialias the text to help with the animation, so adding it to begin with prevents it from changing or looking different.
i had the same problem. wile the execution of a webkit transition some anchor text became antialiased.
after many tries i've found that this happen just in elements that are positioned and have z-index with inside other elements positioned too and with z-index.
#footer {
bottom: 0;
left: 330px;
right: 100px;
height: 75px;
background-color: #231f20;
min-width: 540px;
min-height: 75px;
position: fixed;
z-index: 10;
}
inside the footer i have
#cityNav > ul > li a {
font-size: 24px;
text-transform: uppercase;
position: relative;
z-index: 110;
line-height: 24px;
height: 24px;
display: block;
}
and this is my transition
.circle {
position: absolute;
top: 0;
left: 0;
display: block;
background-color: #ff0000;
width: 20px;
height: 20px;
cursor: pointer;
text-indent: -999em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.circle:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
I was having this issue in Chrome for OSX. Using -webkit-backface-visibility: hidden; fixed the problem.
I've faced this issue numerous times and have had success adding the following css to the animated element:
z-index: 60000;
position: relative;
It seems it needs both z-index and position to be effective. In my case I was using it with Font Awesome animated spinners.
What you're seeing is webkit anti-alias your text because it's treating it as a texture as opposed to a vector. There's not much you can do, other than not using transformations, or using an text replacement to provide an image instead of your type.
There's a few related threads regarding webkit aliasing, but I haven't personally had much luck keeping the type as type, and still using transformations.
I'm not exactly sure of the reason why it's happening, but it looks like when your .geartwo element (100px x 100px) overlaps your text, it seems to lighten it. When it rolls off of it, it's back to normal. I too, notice this only in webkit browsers.
To fix it, you can set the gear width and height to 40px (that's the size of the image anyway -- I don't see the need for it to be 100px x 100px), and then re-position it accordingly.
EDIT: I'm not sure that you need to do this after my proposition, but I found this related discussion after a bit of searching.
As stated above, -webkit-font-smoothing: antialiased; works on desktop Safari.
But on iOS, you need to use -webkit-backface-visibility: hidden; in order to fix this.
While -webkit-backface-visibility: hidden; is a partial solution; it really ruins the display of your text, especially if you have smoothing / AA enabled. This bug is nasty too, because it happens only when you are using the transform property as well.
After roughly 2 years of sporadically visiting this topic every other month, I found a fix. You need to add a position:relative to the css element that is being animated. There is a catch though, you need to give it a z-index value that is greater than or lower then the element that you see the distortion on. This fixes it 100%.
Since topic doesn't have a 'definite' answer, I hope this answer helps someone who was in the same boat I was in for years.
For iOS8, the only way I succeeded in removing the transformation flickers was by adding
body * { -webkit-transform: translate3d(0, 0, 0); }
to my stylesheet.
All you need to do is add this CSS rule to any element that you are seeing the flicker on:
-webkit-transform-style: preserve-3d;
And that's it.