Mobile Safari shows the correct version of the UI for a split second.
After that the translated 3d surfaces cut into each other.
.top {
background-color: #a58855;
transform: translateY(-50px) rotateX(90deg);
-webkit-transform: translateY(-50px) rotateX(90deg);
}
Please see full code on jsbin
Any ideas how to fix the problem? I tried adding custom z-indexes and z-translations, but nothing seems to help. After half a second image "corrects" itself to the broken state.
I try to make a mobile menu: http://animesector.budi.upperyard.de/
You can see at the top Header Bar 2 Menu Buttons.
The right one give the Content area transform(translateX(-200px));
The left one give the Content area transform: translateX(200px);
The Negative (-) value dont create a Scrollbar horizontal Scrollbar...
But the Positive one does. have anyone any solution for this problem?
I tried to give the div around a overflow: hidden; but this didn't work for me.
You can prevent the horizontal scrollbar with overflow-x: hidden in the body element. Tried it right in the browser with dev tools and worked perfectly.
I had exactly the same issue. In the end I avoided the menu getting scrolled off the screen using translateX - I used the scale transform instead.
Your site is not visible anymore, but probably this is what you did to make the menu visible by transitioning:
translateX(-200px) -> translateX(0)
I used the scale to achieve somewhat similar transform:
scale(0,1) -> scale(1,1)
.menu {
transition: transform 150ms ease-in-out;
transform-origin: top right;
transform: scale(0,1);
}
.menu.open {
transform: scale(1,1);
}
Yes, there is a difference in the animation but it's probably not even recognised by most users if it happens fast.
No overflow manipulation needed.
I have a very odd problem that I only observe with Safari, on a touchpad.
When scrolling down, my navbar fades in / down via CSS transition. If I happen to scroll back up, thus removing the class responsible for the transition, the navbar gets stuck visually in the wrong place, only on safari. The CSS / styles say the correct values, and even the hover/click handlers are in the right place.
That is, In the image below, my mouse is hovering at the blank white area, while the navbar stuck below gets highlighted.
There are several odd things about this:
The element is the navbar via global styles, yet only happens on this particular page.
I can't seem to trigger the problem via scrolling with the mouse.
I can only trigger it via very subtle trackpad movements, or fast trackpad movements.
Any suggestions on how to fix this?
Relevant CSS
.is-sticky-slide-down {
#include experimental(animation, fadeInDown .3s ease-out 0s);
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
The problem was due to enabling -webkit-backface-visibility: hidden on elements. Removing this "fix" for hover glitches (like twitching opacity fades) fixed the other glitches on Safari.
To be clear, the fix is to remove -webkit-backface-visibility from affected elements.
Inspired by Design Shack, I wanted to have some linkable photos zoom in slightly when hovered over. However, I want the animations to be centered, so it's like we're zooming in slightly.
In order to keep the image centered, I fiddled with top, left, margin-top, and margin-left to make it work. I'm not even sure how it works :-) but it works...
...except that the animation is actually kind of choppy and jumpy, at least in Safari - worst of all in Safari on 10.9. (Firefox and Chrome do a better job though.)
Check out the example here:
http://jsfiddle.net/MnHVk/1/
The salient piece:
.card img:hover {
height:110%;
width:110%;
top:10%;
left:-10%;
margin-top:-10%;
margin-left:5%;
}
Compare the jumpy animation to the version that doesn't try to center, here:
http://jsfiddle.net/MnHVk/2/
Can anybody think of any other way to do this hover animation that won't result in such a jumpy effect? Perhaps there's some other technique for adjusting the positioning so that when the image is hovered over, it moves smoothly?
If you use transform, it should render thru the GPU, and I think, smoothly
.card img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
}
updated demo
There seems to be an issue with my page here:
http://www.lonewulf.eu
When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome.
My css:
.img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
display:block;
border:1px solid #121212;
}
.img:hover{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-khtml-opacity: 1;
display:block;
}
Another solution would be to use
-webkit-backface-visibility: hidden;
on the hover element that has the opacity.
Backface-visibility relates to transform, so #Beskow's has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes.
See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.
For some reason Chrome interprets the position of elements without an opacity of 1 in a different way. If you apply the CSS attribute position:relative to your a.img elements there will be no more left/right movement as their opacity varies.
I had the same problem, I fixed it with css transform rotate.
Like this:
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
It works fine in major browsers.
Another solution that fixed this issue for me was to add the rule:
will-change: opacity;
In my particular case this avoided a similar pixel-jumping issue that translateZ(0) introduced in Internet Explorer, despite fixing things in Chrome.
Most of the other solutions suggested here that involve transforms (eg. translateZ(0), rotate(0), translate3d(0px,0px,0px), etc) work by handing painting of the element over to the GPU, allowing more efficient rendering. will-change provides a hint to the browser that has presumably a similar effect (allowing the browser to render the transition more efficiently), but feels less hacky (since it's explicitly addressing the problem rather than just nudging the browser to use the GPU).
Having said that, it's worth bearing in mind that browser support is not as good for will-change (though if the issue is with Chrome only then this might be a good thing!), and in some situations it can introduce problems of its own, but still, it's another possible solution to this issue.
I was need apply both backface-visibility and transform rules to prevent this glitch.
Like this:
a {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}
I had a similar issue with (non-opacity) filters on hover. Fixed by adding a rule to the base class with:
filter: brightness(1.01);
backface-visibility (or -webkit-backface-visibility) only fixed the issue in Chrome for me. To fix in both Firefox and Chrome I used the following combination of above answers.
//fixes image jiggle issue, please do not remove
img {
-webkit-backface-visibility: hidden; //Webkit fix
transform: translate3d(0px,0px,0px); //Firefox fix
}
I encountered a similar issue in Safari 8.0.2, where images would jitter as their opacity transitioned. None of the fixes posted here worked, however the following did:
-webkit-transform: translateZ(0);
All credit to this answer via this subsequent answer
I ran into this issue with images in a grid each image was nested in an that had display: inline-block declared. The solution that Jamland posted above worked to correct the issue when the display: inline-block; was declare on the parent element.
I had another grid where the images were in an unordered list and I was able to just declared display: block; and a width on the parent list item and declared backface-visibility: hidden; on the image element and there doesn't seem to be any position shift on hover.
li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }
The solution alpipego was served me in this problem.
Use -webkit-backface-visibility: hidden;
With this the image no move in hover opacity transition
/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
I had trouble with all the other solutions here, as they require changes to the CSS that may break other things -- position:relative requires me to completely rethink how I'm positioning my elements, transform:rotate(0) can interfere with existing transforms and gives wonky little transition effects when I have a transition-duration set, and backface-visibility won't work if I ever actually need a backface (and requires a whole lot of prefixing.)
The laziest solution I found is to just set an opacity on my element which is very close to, but not quite, 1. This is only a problem if opacity's 1, so it's not going to break or interfere with any of my other styles:
opacity:0.99999999;
Having marked Rick Giner's answer as correct I then found out it did not fix the issue.
In my case I have responsive width images contained within a max-width div. Once the site width crosses that max width the images move on hover (using css transform).
The fix in my case was to simply amend the max width to a multiple of three, three columns in this case, and it fixed it perfectly.
I noticed you had opacity included in your CSS. I had the same exact issue with Chrome (the image moving on hover) .. all I did was disable the opacity and it was solved, no more images moving.
.yourclass:hover {
/* opacity: 0.6; */
}
Had the same issue, My fix was putting the class before the src in the img tab.