When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example css
#foo{
width:100%;
height:200px;
border:1px solid black;
position:relative;
}
#poop{
width:25px;
height:25px;
background-color:green;
position:absolute;
right:50%;
top:50%;
-webkit-transition: all 1s;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}
#foo .blah{
transform:translate3d(-100%,-100%,0);
-webkit-transform:translate3d(-100%,-100%,0);
width:100px;
height:100px; }
And a jsfiddle http://jsfiddle.net/84w4hj99/4/
I'm using jquery to add a class to the element on a button click for the sake of demonstration, but first noticed it when using :hover to get the same effect. Am I missing something here or is it just a problem with Safari, and does anyone know a workaround? Thanks.
Try using transform: scale() instead of changing the width and height. You will have a smooth transition in this case. However, you will have to adjust the top & right or transform: translate3D() properties to position your object back to the correct position. Should be easy.
See http://jsfiddle.net/y3xqak1z/
Related
I'm using filter:grayscale(1) on images. The container of the image also have pseudo :after applied with a background color set to mix-blend-mode:screen. Everything seems to work, except on Safari iOS.
Here's the CSS for the images isolated:
.grid-item img {
filter:grayscale(1);
transition:filter 0.25s ease;
}
.grid-item:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
z-index:1;
mix-blend-mode: screen;
transition:opacity 0.25s ease;
pointer-events:none;
}
.grid-item.is-active:hover img {
filter:grayscale(0);
}
You can see the whole site here: http://www.tobiasgerhardsson.com/work/linazedig
And here's a video showing it live: https://streamable.com/a6lxe
The bug is hard to explain, but it seems like it's moving images in between the others, so that some images gets duplicated and replaced with the same image, or fragments of other images are shown in eachother. It disappears on scroll, but sometimes the bug appears again randomly.
I've tried to remove the mix-blend-mode as I thought that was causing the bug, but the bug only disappears when I remove the filter:grayscale(1) from the images. I'm also using a JS plugin for doing a flexbox masonry grid layout on desktop. But I've also removed the script temporarily, and the bug remains.
So all in all, this seems to be a problem with the filter:grayscale, but I'm not sure if it's caused by a combination of other CSS properties or not. Has anyone experienced this before and know what could be causing it? Or is it just a bug not possible to solve?
Reading this thread, I found that applying the following properties to the element with the filter makes the glitch go away:
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
I found a wired thing when I apply the transform to an element, it changes the z-index order, the code as:
<button class="test">
click me
</button>
css:
.test{
border-radius:100px;
transition:all 1s;
position:relative;
}
.test:hover{
transform:translateY(30px);
}
.test::after{
content:'';
position:absolute;
z-index:-1;
top:0;
left:0;
background:blue;
width:100%;
height:100%;
}
codepen: https://codepen.io/JianNCI/pen/jZQRpz?editors=1100
I was intending to hide the :: after content by setting thez-index order to -1 and I am setting the blue background color for distinguishing them. but once I hovering on the button, the hiding content will overlap the button. so my questions are:
Why the z-index:-1not working when I hovering on it? it is supposed to remain as -1 since I only set the transform property within the hover effect.
When I replace the transform property like color: red, it is work as I expected. So I am wondering if this the transform makes the z-index:-1 lose effect in this case?
Im trying to get a transition working so that the bg colour fades into another colour depending on position of page/i.e. triggered by divs with same class.
Found some js here (http://codepen.io/Funsella/pen/yLfAG) which works exactly how I want on desktop, but it breaks on iPad (no matter the browser).
Would anybody know how to do this transition with CSS?
I found but it's triggered by a hover..
For example..
http://jsfiddle.net/L9JXG/1/
.div1 {
height:200px;
width:600px;
position:relative;
background:red;
}
.div1:after {
position:absolute;
width:100%;
height:100%;
content:'';
background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
background-size:cover;
opacity:1;
transition: 3s;
}
.div1:hover:after {
opacity:0;
}
You have to set suitable break points. Here is a great resource for the question.
A stand alone script to Change Page Background on User Scroll
Demo
This is the download link for the script http://download.techstream.org/Change-Page-Background-on-Scroll.zip (Download will start when you click on it)
Basically what I am trying to do is have a div in the body with a fixed position float above everything. This works it is the next part where I have the problem, this is the code I use for it (in LESS)
.fadeIt{
opacity:0;
cursor:pointer;
.transition (opacity .5s linear);
z-index:-1;
display:block;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
&.cover{
z-index:101;
}
&.open{
opacity:1;
}
}
This works and I have a click event on elements to toggle its visibility, however I want to pull the clicked elements over it regardless of their place in the DOM. Giving it an "accent" effect. Currently the fadeIt element is right by the end of the body tag, I feel this is "cleaner" but am open to changing it.
So what I want to see in the end is when I click on an element that triggers the visibility of the fadeIt element, that the clicked element will appear overtop of it in the same position it is in within the DOM.
I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.
Now assume I have a CSS as follows.
.bubble
{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.bubble.move
{
-webkit-transform: translateY(-50px);
}
As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?
Translate isn't what you're looking for. You want to position the element absolutely and put the transition on the top property. Something like:
.bubble {
position:absolute;
top:100%;
transition:top 1s ease-in-out;
}
.bubble.move {
top:50px;
}
Only bad part about this approach is that the body will need to be the relative parent of the .bubble. I left out vendor prefixes because I hate them.
Have you tried positioning the element absolutely instead of relatively?
Use javascript to calculate it and set the css using javascript too