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.
Related
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
I have an issue that is occurring in Chrome in a theme I created, when I hover over an image the font icons on the page are moving around. I've looked around for a solution but I can't find anyone mentioning this. Take a look at the demo here and hover your mouse over the image in the second blog post.
This is the css rule for the hover event:
.entry-image a:hover img {
-webkit-transform: scale(1.06);
-moz-transform: scale(1.06);
-ms-transform: scale(1.06);
-o-transform: scale(1.06);
transform: scale(1.06);
}
Thanks in advance,
Ivar Rafn
I'm guessing you had a margin or position set with ems or rems. When an em or rem size resolves to a pixel value with decimal points (e.g., 17.100295px), hovers on nearby elements in Webkit and Blink can cause a little twitch.
I fixed it.
I just had to add a css rule for the :before pseudo-element to have margin:0 and display:inline and that took care of the problem.
First of all,I am doing a html5 webapp on iOS, especially iPad.when touchmove,the div should move with my finger together,I used to change the left value to make this effect,but it seems not smooth enough ,so I used translate3d to do it,it seems great!
And then,I just found the strange flicker happend,there are white flicker or flash in there several time when finger move the div.by the way,after moved once,the flicker is dispear.
So,I check a lots of functions which include:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
But no one works except change the flicker color to grey=.=
So,this is my question.(iOS 5.01)
you should check the children, try giving them
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
I had more strange issue when copies of input elements were displayed as artifacts all over the next content after scrolling down and up.
And couple lines of CSS saved the day (actually days of struggling :)
Make sure you use such CSS for your scrolling container and all children inside of it
.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}