Blur & Flicker issue on CSS transform - html

I found quite a few questions here with solutions too, but none seem to work for me. After the scale up, the text is blurry and then it flickers into position. Something wrong with the rendering.
I made a fiddle with the exact structure I'm trying to use, if someone has a solution for it, I'd appreciate it.
I want to underline that I've tried the solutions I found here, but none helped, or I haven't been able implement them as intended.
FIDDLE: https://jsfiddle.net/1yu9p66L/1/
.box1:hover {
-moz-backface-visibility: hidden;
-moz-transform: translateZ(0) scale(1.0, 1.0);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.09);
-moz-perspective: 1000;
-moz-backface-visibility: hidden;
}
PS: Currently testing on FF 45.0.1.

Add transform to the original box that scales it to < 1 and then change the transform in hover state to 1. You'll need to adjust the sizes of the box.
This to .box1, for example:
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
and this to .box1:hover
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
https://jsfiddle.net/1yu9p66L/2/

Related

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%);
}

CSS translatey to move to the next DIV using anchors

I have a bootstrap template which include a navigation bar with 3 links. Each link point to an anchor.
Each anchor is a SECTION with height set to 100%. The scrollbar is hidden so the only way to navigate to the next section is by using the navigation bar.
I want to add an animation while the anchor is change.
I setup my template and the animation but I don't understand why my DIVS goes offset instead of scrolling as expected.
My JSFiddle is https://jsfiddle.net/raffaeu/qu4skwf4/
I set the transitions as following:
#home:target{
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
#about:target{
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#contact:target{
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
And this is how I set the animation for each section
section {
width: 100%;
height: 100%;
z-index:0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
I belive that in this case CSS translate is unnecessary and even plain wrong approach. Scrollbar is invented for a reason, and you should not take it away from page visitors. Also, think about mobile users.
I suggest better using jQuery.offset function and add animation, like this:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('id3');

Rotate IE7 90 degree

Is there a way to rotate IE7 90% (the whole page)? I tried to rotate body and HTML element 90 degree by using CSS, but scroll bars are displaying because the width and height are not fix the window. I just want to rotate whole html 90% and the width and height are fix the window. Please help me.
How can I do that? (Maybe using CSS or something else). Thank so much.
Sorry about my English.
I have found the following links which may help you:
https://code.google.com/p/jqueryrotate/wiki/Examples
or perhaps:
http://raphaeljs.com/
Raphael supports rotation for IE6 onwards, I hope this helps you in your research.
Use below code that will support in all browser,
/*rotate 60 degrees*/
#rotate60 {
/*General*/
transform: rotate(60deg);
/*Firefox*/
-moz-transform: rotate(60deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(60deg);
/*Chrome, Safari*/
-webkit-transform: rotate(60deg);
/*Opera*/
-o-transform: rotate(60deg);
/*alter opacity*/
opacity:0.6;
filter:alpha(opacity=60);
}
/*rotate 90 degrees*/
#rotate90 {
/*General*/
transform: rotate(90deg);
/*Firefox*/
-moz-transform: rotate(90deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(90deg);
/*Chrome, Safari*/
-webkit-transform: rotate(90deg);
/*Opera*/
-o-transform: rotate(90deg);
/*alter opacity*/
opacity:0.4;
filter:alpha(opacity=40);
}
and use overflow hidden for scrolling part.

css transform flip disabled click event while transition

The transformation is working by flipping the image when you get hover,
but within the 0.6s of the transformation you can't use the event associated with the click on it, after the image stop rotating you click ant it work.
The click action is just a <a href>.
Why this happen?
.flip:hover{
transition: 0.6s;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
Container must have an absolute position!

Advanced CSS animations

I have been looking over this example and wanting to take it up a notch, I am trying for the number "1" card to start off like this
(-webkit-transform: rotateZ( 160deg );) and rotateZ towards 0 WHILE flipping, I've been playing around with the matrix and skewing and cannot seem to get that effect.
You can give the same transform property multiple (space separated) transform-functions at the same time, something like this in your case;
#card .front {
transition: all 1s;
transform: rotateY(0deg) rotateZ(200deg);
}
#card.flipped .front {
transform: rotateY(180deg) rotateZ(0deg);
}
(The same applies to the backface)
Chrome-only demo: http://jsfiddle.net/4Z4sF/