IE 10, 11 & Edge shaky on hover animation - html

I have a simple example (https://jsfiddle.net/5x9yLyxq) with two "tiles" that have a hover function (only css, no javascript).
The initial status of them is this
.tiles div{
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
and I then have a :hover css which looks like this:
.tiles div:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2);
}
Problem: In IE (any, even Edge) the zoom animation "shakes" (looks really bad).
Does anyone know anyway to make the animation smooth (like in Chrome), can be a js library or css I do not care, just needs to be smooth?
Thanks

I've found this to be caused by the transform-origin property, which defaults to 50%.
If you change this to a value just over that, the shakiness (magically) stops. Try adding the following to your stylesheet:
transform-origin: 50.01%;
transform-origin is well supported for IE8 and up, Edge, and all other major browsers.
Here's a working example based on the JSfiddle originally posted by #DavidDunham.

You can try this
-ms-transform: scale(1.1);
for IE 9 or greater version.

Related

Transform scale() Safari bug when used on elements with border

CSS transform scale() function appears to have a bug on Safari when it's used on elements with a border.
I'm trying to zoom an image on mouse over using transform: scale() function but if the image has a border then it gets pixelated when scaled.
Here is a sample of the same element with the same CSS rules applied (except the border):
Code example: https://jsfiddle.net/m6g4kw30/
div {
text-align: center;
}
img {
height: 100px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
border: 1px solid #000;
margin: 20px;
}
img.noborder {
border: none;
}
img:hover {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: translateZ(0) scale(5);
transform: translateZ(0) scale(5);
}
<div>
<img src="https://via.placeholder.com/1000.png" alt="">
<img src="https://via.placeholder.com/1000.png" class="noborder" alt="">
</div>
CSS transform scale() function appears to have a bug on Safari when it's used on elements with a border.
You can say that again! Unfortunately, the reported bug(s) for this (and similar) issues go back many years, with the following bug referenced in most:
https://bugs.webkit.org/show_bug.cgi?id=27684 (Opened in 07/2009)
If you didn't catch the date, it's a 10 year old bug that's still causing developers issues today! YIKES.
Basically, the issue comes down to Safari rasterizing the layer. On transform/scale, it resizes the layer, however it does not re-render the rasterized layer. In your use-case, the rasterized image is scaled up, but the text/image is blurry.
As for a workaround/fix? There are a couple ways you can "address" this:
1) Force a re-render
A quick/easy fix is to force Safari to re-render your layer when you transform. One way this can be achieved is by applying a CSS property which you then change after transforming (some people have success changing a background-color, for example). For your specific use case, I had luck with the following combination:
img {
outline: 1px solid #000;
border: none;
}
img:hover {
outline: none;
border: 1px solid #000;
}
By toggling those specific values, I was able to force Safari to re-render the rasterized layer, thus rendering a sharp image (similar to the non-border example). Here's a JSFiddle with the full code example: https://jsfiddle.net/gc56brfh/
2) Scale down, then up
Another workaround, documented here, is to set the element's initial size to the "scaled up" dimensions, and then scale down the element until you're ready to scale it up. That way, the element is rasterized to the correct dimensions.
CSS wise, that may look like:
img {
-webkit-transform: translateZ(0) scale(0.2);
height: 250px;
}
img:hover {
-webkit-transform: translateZ(0) scale(1);
}
In the above, we've set the initial size of the img to 250px (this is based on your original css, with images being 50px and then scaled up 5). We then scale down the image by 0.2, resulting in 50px. On hover, we then scale back up to 250px by setting scale(1).
Here's an updated JSFiddle: https://jsfiddle.net/df2zqgnx/
One thing to note is that other CSS properties might need to be updated with this workaround. For example, you'll notice in the fiddle I also needed to update the border from 1px to 5px to compensate for the scaling down.
Anyway, hope this was helpful and one of the solutions works for you!

simple css animation not smooth in Safari

I have a weird behaviour on a website in Safari. I want to expand a menu from height 0px to height 100% with a css transition. This works properly in Firefox, Chrome and Edge. However, in Safari, there is always a breakpoint where the animation stops for a really short period, causing a laggy animation. I checked that no element is on the same z-index. I found a "fix" on a homepage, which is indicated by a comment in the css, but that does not changes anything.
.dropdown-nav{
position: fixed;
display: block;
z-index: 21;
width: 100%;
height: 0;
left: 0;
background-color: white;
top: 0;
padding: 0;
transition: height 0.6s ease-out;
-webkit-transition: height 0.6s ease-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
/* Enable hardware acceleration to fix laggy transitions */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.dropdown-nav-visible{
height: 100%;
}
In my js-script, I simply toggle the class .dropdown-nav-visible onto the .drop-down-nav
$('#nav-icon4').click(function(e){
e.preventDefault();
$(".dropdown-nav").toggleClass("dropdown-nav-visible");
$(this).toggleClass('open');
});
Here you find the laggy behaviour: https://magnavoce.ch
and here the same setup, but it works: http://dev5.raphael-rapior.com/.
I also tried using animation-duration like suggested in a similiar question on SO. I also tried removing every other part of the site, still the same.
Edit: safari 9 seems to not have this problem, but safari 12
Height transitions are heavy (they recalculate too many things at each frame), if possible you should use transform instead. Other than that, you may try to add will-change: height
ex:
.myNav {
transform: translateY(-100%);
transition: transform 0.15s;
}
.myNavActive {
transform: translateY(0%);
}

Text & Icons appear blurry and move with css transform effect

So I've done a lot of researching regarding this problem especially going through and trying all of the stuff in this thread:
https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome#=
However, filter:blur(0); transform:translateZ(0) only work on laptop screens and not normal IPS flat screens. You still see the shifting and blurring of text. Does anyone have a solution that works for both laptop, normal monitors and across browser ? Below is an example of what happens on normal monitors, notice the shifting of the icons vertically. Below that is the code we're using.
.article-catalogue {
transition: transform .3s ease, box-shadow .3s ease,border .3s ease;
filter: blur(0);
image-rendering: -webkit-optimize-contrast;
transform: translateZ(0);
}
.article-catalogue:hover {
transform: perspective(1px) translateZ(0) scale(1.02);
box-shadow: 0px 12px 40px -10px rgba(51,51,51,.2);
}
One thought, could it be the rollover elements within the card causing the problem ?

Transitions working in Chrome and Firefox, not in Safari

I used this code:
codepen.io/egrucza/pen/PwbzPy
It seems to work in Chrome and Firefox, but not in Safari. I have added Modernizr, but that doesn't help me out. The triangles in Safari are visible without hovering and have an odd placement. The hover doesn't do anything.
Any quick fixes?
Most probably it's because you use transform:: rotate(-45deg) translateX(0); which requires vendor prefix on Safari. Try to add:
-webkit-transition: -webkit-transform 200ms ease;
-webkit-transform: rotate(-45deg) translateX(0%);

How to make scale transition of big images in Firefox more smooth? (like in Chrome)

I have a trouble, when I need to rotate big image(about 3000 - 5000px), that already scaled to 0.1 - in Firefox it goes not smooth. I think, it depends of Firefox render engine, because in Chrome, Opera and Safari everything is ok.
How do you think, is it possible to do the same in FF?
Here is jsfiddle (you need to hover on circle in FF).
.item {
width: 3000px;
height: 3000px;
-webkit-transform: scale(0.1);
transform: scale(0.1);
transition: all 5s linear;
}
.item:hover {
-webkit-transform: rotate(100deg) scale(0.1);
transform: rotate(100deg) scale(0.1);
}
Check for image-rendering css property :
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Unfortunately default settings are the most optimized on Firefox, and as you said this task is handled by the browser itself, so there is pretty much nothing you can do.