I have designed a little infinite carousel that uses a placeholder div element (that shrinks and expands), followed by a few images that scroll to one side on a button click, after which the element that moves off screen moves to the back of the queue again. Inside a container div element.
It works perfectly on Chrome and Firefox but the transition is very slow/jaggy on Safari 7.0 on Mavericks OS X. I've tried a few documented hacks to fix it but can't see any improvement.
I would like to know is someone can have a look at the css below and tell me if the hacks are placed on the right elements please?
#ContentGallery {
background-color: black;
z-index:1;
height: 600px;
position: absolute;
width: 2600px;
top: 0;
left: 0;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000;
}
.flipPagePhoto {
display: inline-block;
-webkit-transition: margin-left 0.75s ease-out;
-moz-transition: margin-left 0.75s ease-out;
-o-transition: margin-left 0.75s ease-out;
transition: margin-left 0.75s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.flipPagePlacehold {
float: left;
margin-left: -100px;
width:300px;
height: 600px;
-webkit-transition: margin-left 0.86s ease-out;
-moz-transition: margin-left 0.86s ease-out;
-o-transition: margin-left 0.86s ease-out;
transition: margin-left 0.86s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
<div id="ContentGallery">
<div class="flipPagePlacehold static"></div>
<img class="flipPagePhoto">
<!-- More images follow -->
</div>
I have the same issues with Safari 7 in many many places on my website mainly based on css transitions. Safari 7 is a step backwards for what regards smoothness of css transitions. I googled a lot but it seems still a matter of rare interest. Hopefully this will change and lead to better Safari 7 versions in the coming updates. There are also color difference issues…
So I don’t think it has to do with your code at all! Hope this helps a little.
Related
I have an image that increases your score every time you click it. I want to make it more interesting so that the image slightly shrinks when you click it, and enlarges to normal size again when you let go of the click. How would I do this animation/effect. (With CSS)
CSS3 transitions is the best way: in this example is a div, try with img.
Multiple declarations are used to ensure compatibility with all browsers.
div {
width: 100px;
height: 100px;
background: green;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
div:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
<div>
</div>
parentDiv:hover > img{
padding: 15px;
}
I have the following fiddle:
http://jsfiddle.net/cYwkz/
I'm using the following CSS:
article {
border: 2px solid #cccccc;
background-color: #e5e5e5;
border-radius: 5px;
display: inline-block;
height: 150px;
margin: 0 2% 32px;
position: relative;
vertical-align: top;
width: 160px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
article:hover {
-webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-moz-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-ms-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-o-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
}
When I hover the left-bottom part of the articles, the hover and transforms work as correctly. However when I hover over the right-top part, the transform flickers or sometimes doesn't start at all.
I don't have these problems in Firefox.
System: Mac OSX 10.9.1
Works in: Firefox 26, Firefox Aurora 28, IE10
Fails in: Chrome 32, Safari 7.0.1, Opera Next 19
Hope you guys can help! Thanks in advance
The problem arises from the fact that in webkit the plane situated at z=0 gets the hover events (so to speak).
Since your rotation makes the elements (specially the right top part) go away (or inside the screen), they get under the zplane and no longer trigger the hover.
You can solve that moving them towards z positive:
-webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg)
translateZ(10px) scale(1.025);
To avoid the Z movement in the hover state, set the same Z in the base state.
-webkit-transform: perspective(400px) rotateX(0deg) rotateY(0deg)
translateZ(10px) scale(1);
It's always a good idea, when using transitions, to set the base transform in the same way that the transformed state. That's why I set the 0deg rotations.
fiddle
I used this code below
<style>
.outer div {
float: left;
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
}
.outer a {
-webkit-transition: all 1.0s ease-in-out;
background:#0F6;
width:100px;
height:100px;
display:block;
-webkit-transform: rotateY(45deg);
}
.outer div:hover a {
-webkit-transform: none;
}
</style>
<div class="outer">
<div>
</div>
</div>
This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/
I created a simple CSS transition to rotate a div 360 degrees in this page (the disc menu), but it appears to be working only on Firefox Nightly. I also tried in Firefox 15 (the release build) and Google Chrome. Both only move the image to the left a bit and show some graphical artifacts around the overlying text. This is the CSS related to the disc (the rotating image is actually a empty div with set size inside the real menu div):
#menuDisco {
transition: all 0.8s;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
background: url("img/disco.png");
background-size: 100% 100%;
position: relative;
top: 0%; left: 0%;
width: 100%; height: 100%;
color: rgba(0,0,0,0);
}
#menu:hover #menuDisco {
transition: all 0.8s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
Make sure to include all the prefixes. Transitions have been unprefixed in FF16 and Opera 12.5. (-ms-transition isn't useful because IE9 doesn't support it and IE10 is unprefixed).
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
You also don't need the transition rule in the second style declaration since it is the same as the first.
Here is the problem with the code bellow. I want to create zoom-like effect with css. I am adding the classes zoomIn or zoomOut with jquery on certain events, which is not important right now.
The problem is that in Chrome and Safari (webkit based) the zoom in and out start from 0. In firefox for instance the transition starts from the current image height and extends to 1160px in this case. The webkit browsers however seem to handle things different and start the transition from 0 to 1160px
I ain't got no clever way to solve this so please help
Cheers
The images have also a class of 'full'
.full {display:block;position:absolute;width:100%;top:0;left:0;}
.zoomIn{
top:0;left:0;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
height: 1160px !important;
left: 50%;
margin-left: -960px !important;
margin-top: -670px !important;
top: 50%;
width: 1920px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
}
.zoomOut {
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-moz-transform: scale(1);
margin-left: 0 ;margin-top: 0;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-ms-transform: scale(1);
}
Not really the z-index, but I found that best to describe the issue in a short title...
See this simplified example:
http://jsfiddle.net/sCnDx/
If you hover over the images, you will note that some of the corners are below other images.
If you remove the code pertaining to the rotation, all is working fine.. So the problem is that rotation or how it interacts with the scaling.
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
Is there anything that can be done about this or is this a browser bug?
(Tested in safari)
Thanks,
Wesley
#wesley giv e position:relative to your images like this :
img {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
position:relative;
}
a img:hover {
-webkit-transform: scale(1.25) !important;
-moz-transform: scale(1.25) !important;
-o-transform: scale(1.25) !important;
transform: scale(1.25) !important;
position: relative;
z-index: 2;
}
because z-index only work on position relative, absolute & fixed.
check this fiddle http://jsfiddle.net/sandeep/sCnDx/3/
Z-index works for me.
http://jsfiddle.net/GY4Jp/
add to img
position: relative;
z-index: 1;
add to img:hover
position: relative;
z-index: 2;