issues with -webkit-transform in chrome on mac - macos

I have a page with simple transitions. I am sliding in a panel from the left (class copyDeck) and I have an element that contains an animated gif (class animatedTank) that overlays a background image. I am adding a class of loaded to the body with js onload to fire the animation.
This all works great in all browsers, a user pointed out that on a Mac with the latest version of chrome we have an issue.
The div that I slide in is actually scaling in and the animated gifs containing element slides up from the bottom (I have no animations set for this element or its parents)
h1, .copyDeck, h1 + span, div.mainContent ul{
-webkit-transform:translateX(-60%);
-moz-transform:translateX(-60%);
-o-transform:translateX(-60%);
transform:translateX(-60%);
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.copyDeck{
-webkit-transition-delay:.125s;
-moz-transition-delay:.125s;
-o-transition-delay:.125s;
transition-delay:.125s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity:0;
margin-top: 3em;
}
.loaded h1, .loaded .copyDeck, .loaded h1 + span, .loaded div.mainContent ul, .loaded blockquote, .loaded .CTA{
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity:1;
}
.animatedTank {
background: transparent url("Assets/transportation_imgSeq.gif") top left no-repeat;
width: 212px;
height: 369px;
position: relative;
top: -340px;
left: 389px;
float: left;
}
<div class="mainContent">
<div class="fadeOvr"></div>
<h1>Level Tanks</h1>
<span>& A Better Bottom Line</span>
<div class="copyDeck">
<p>
...
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
<div class="animatedTank"></div>
Does anyone know of a fix, solution or has anyone experienced this issue?

Related

Can't vertically centre image, but horizontal works

I'm trying to make a custom follower alert for Twitch TV. And I'm trying to centre a small image inside a div. So far I've managed to centre it horizontaly but no matter what I try it will not centre vertically. I'm not sure why, i've tried reading many other questions on stackoverflow already, as well as following a guide from W3schools but I think this is more of a specific problem to my code. Here is a fiddle. (You can't see the image but you can see where the image would be)
And here is the code; with the idea being that the image is centered both horizontally and vertically inside the small blue square, which i've named 'left-square-container'. However currently the image is horizontally centered at the top of the div only.
If anyone can help I'd appreciate it.
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
6% {
transform: translateY(0);
}
98% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
#keyframes slideInFromTheLeft {
0% {
opacity: 1;
transform: translateX(-100%);
}
4.4% {
opacity: 1;
transform: translateX(0);
}
97% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft-Text {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
overflow: hidden;
/*hide elements when they overflow*/
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 100px;
height: 100px;
background: #0d47a1;
position: relative;
display: inline-block;
float: left;
z-index: 1;
transform: translateX(-100%);
animation: 9.6s 1 slideInFromAbove;
/* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.icon img
/*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/
{
display: block;
margin: 0 auto;
webkit-filter: drop-shadow(1px 1px 1px #212121);
filter: drop-shadow(1px 1px 1px #212121);
}
.right-retangle-container {
width: 400px;
height: 100px;
opacity: 0;
background: #292929;
border-top: 5px solid #0d47a1;
box-sizing: border-box;
display: inline-block;
float: left;
position: relative;
/* needed for z-index*/
z-index: 0;
/*place under left square*/
transform: translateX(-100%);
animation: 8.8s .6s 1 slideInFromTheLeft;
/* timing (.5 initial animation duration + 8s hold + .3s removal of self) additional .6s of delay for animation of left square*/
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.text {
font-size: 30px;
color: #ffffff;
overflow: hidden;
text-align: center;
/*vertical alignment of text*/
position: relative;
/*horizontal alignment of text*/
top: 50%;
/*horizontal alignment of text*/
transform: translateY(-50%);
/*horizontal alignment of text*/
}
.text-animation {
transform: translateY(100%);
animation: .5s 1s 1 slideInFromBelow;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
margin-left: 20px;
margin-right: 20px;
}
.keyword:not(.user_message) {
color: #f57f17;
}
<div class="follower-container">
<div class="left-square-container">
<div class="icon">
<img class="image" src="{image}" />
</div>
</div>
<div class="right-retangle-container">
<div class="text">
<div class="text-animation">
New Follower <span class='keyword name'>{name}</span></div>
</div>
</div>
</div>
There are several ways to do this, but since you're already using flexbox, I would recommend continuing with that path.
On your .left-square-container div, simply change display to display:flex and then set align-items: center; and justify-content: center;.
Seems to work for me.
Fiddle
If you know the height of the container, you can set the line-height of said container to the value of its height.
I updated your CSS to look like so:
.icon {
text-align: center;
heignt: 100px;
line-height: 100px;
}
The "icon" div does not have any specified height. It is declared block. Hence, you cannot expect to align an image inside this div vertically as the scope of the div height-wise on the screen will be only of the size of the image.
Even in the in css of "icon", you have said margin:0 auto; -> The command will align the image in center not vertically but only horizontally. For what you want to happen, that 0 should be auto and then there should be some height of the div to see it align in the center vertically as well.

IE9 (and IE8) drop down hover issues

I have spent much time on research on this topic and I'm not finding a solution for my particular problem even though I have come across similar issues but their solutions don't seem to fit mine. The issue I"m having does not exist in any non-IE browsers. The main navigation of the site I'm building (#mainNav) when I hover over the main a link to view the drop down, the the focus of the link seems to only be on the actual text. So, when I try to move the mouse down the list it gets no further than the main link text before the hand turns back to an arrow and the menu disappears. This is a CSS3 menu that is working on another site successfully in all browsers and there doesn't appear to be any IE fixes, so I grabbed the code and decided to use it for this site. Everything went well until I checked it in IE :/
These are the areas that I looked at (that normally are the issue in cases such as this): display-block (exists on all "a" tags), removed margins and increased padding (didn't help), assigned a height value (didn't help), increased line-height (nope). I read in other blogs that not having a background color on the link could be an issues (nope), also read that using a transparent 1px image would do the trick (nope). When I say "nope" that's assuming I incorporated the fix correctly.
I appreciate the help very much!
Here is the CSS:
/* //////// MAIN NAVIGATION //////// */
/* Reset */
#navMain,
#navMain ul,
#navMain li,
#navMain a {
border:none;
font-weight:normal;
margin:0;
outline:none;
padding:0;
z-index:1000;
}
/* Menu */
#mainNav-wrap {
width:100%;
height:47px;
float:left;
background:#00aeef;
border-top:#014964 1px solid;
box-shadow: 0px 2px 2px #999999;
}
#navMain {
/*height:40px;*/
width:960px;
position:relative;
z-index:500;
margin:0 auto;
}
#navMain li {
display:block;
float:left;
height:40px;
list-style:none;
/*padding:40px 8px 0 4px;*/
position:relative;
text-transform:uppercase;
}
#navMain li li {
text-transform:capitalize;
}
/* Links */
#navMain li a {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#fff;
display:block;
font-size:18px;
line-height:18px;
font-family:'Raleway', sans-serif;
padding:15px 19px;
text-decoration:none;
text-shadow:0px 1px 1px rgba(0,0,0,.1);
transition:color .2s ease-in-out;
-webkit-transition:color .2s ease-in-out;
-moz-transition:color .2s ease-in-out;
-ms-transition:color .2s ease-in-out;
-o-transition:color .2s ease-in-out;
}
#navMain li:first-child a {border-left:none;}
#navMain li:last-child a{border-right:none;}
#navMain li:hover > a {background:#565454;color:#fff200;}
/* Sub Menu */
#navMain ul {
background: #565454;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
position:absolute;
left: 0;
top: 46px;
opacity: 0;
filter: alpha(opacity = 0);
transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-webkit-transition: opacity .25s ease .1s;
min-width:200px;
}
#navMain ul.electronics {
min-width:350px;
}
#navMain li:hover > ul {opacity:1;filter: alpha(opacity = 100);}
#navMain ul li {
height:0;
overflow:hidden;
padding:0;
transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-webkit-transition: height .25s ease .1s;
}
#navMain li:hover > ul li {height:38px;overflow:visible;padding:0;}
#navMain ul li a {
border:none;
color:#fff;display:block;
font-size:18px;
margin:4px 4px;
padding:8px 14px 8px 14px;
white-space:nowrap;
width:200px; /* Stretches Submenu */
}
#navMain ul li:last-child {margin-bottom:6px;}
#navMain ul li:last-child a {border:none;padding:4px 14px 1px 14px;}
#navMain ul li a:hover {background:none;}
#navMain ul li span {white-space:nowrap;}
.navMain_buffer {height:8px;}
/* ////////// MAIN CONTENT /////////// */
Here is the HTML:
<div id="mainNav-wrap">
<ul id="navMain">
<li>ELECTRONICS
<ul class="electronics">
<li>HDTVs 19"-32"</li>
<li>HDTVs 37" and Up</li>
<li>Gaming Systems</li>
<li>Home Theater</li>
<li>Stereos and Home Theater Systems</li>
<li>Digital Cameras and Camcorders</li>
<li>Small Electronics</li>
</ul>
</li>
<li>Computers
<ul>
<li>Laptops</li>
<li>Tablets</li>
<li>Desktops</li>
<li>Computer Desks</li>
</ul>
</li>
<li>APPLIANCES
<ul>
<li>Washer and Dryers</li>
<li>Refrigerators</li>
<li>Freezers</li>
<li>Ranges</li>
</ul>
</li>
<li>Bedrooms
<ul>
<li>Bedroom Sets</li>
<li>Kid's Bedrooms</li>
<li>Mattresses</li>
</ul>
</li>
<li>Dinning Rooms</li>
<li>Living Rooms
<ul>
<li>Recliners</li>
<li>Sectionals</li>
<li>Living Room Sets</li>
<li>Accessories</li>
</ul>
</li>
</ul>
</div><!-- /END main-nav-wrap -->
I have the answer! It turned out that the element needed a z-index of -1000. That was causing my problem. So this is what needed to be added in my css:
html {
position:relative;
z-index:-1000;
}

css3 border radius animation transition in safari not working

Trying to have a css3 ease transition work on border radius of an image in Safari.
It just kinda blinks into the hover state instead of smooth transition.
Any help is much appreciated. My code is below:
CSS:
.all a:hover img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
-webkit-filter: grayscale(0%);
}
.all a img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.all a img {
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.all a img {
-webkit-filter: grayscale(100%);
transition: border-radius .3s ease;
-moz-transition: -moz-border-radius .3s ease,border-radius .3s ease;
-webkit-transition: -webkit-border-radius .3s ease,border-radius .3s ease;
}
HTML:
<ul class="thumbs">
<li class="all identity">
<img src="https://imjoeybrennan.com/images/logos_t.jpg" alt="Logos"/>
</li>
</ul>
Link to the site:
https://imjoeybrennan.com
The following applied to the parent element with the border radius applied to kick webkit back into line for me:
-webkit-mask-image: -webkit-radial-gradient(white, black);
Another option is to wrap the element in two border radius parents.
Seems hacky to me, but far better than the double wrap option – interested to hear other solutions.
This is a simple fix, Safari does not support the transition from pixels to percentages. If you change your hover styles from 50% to 100px you will see that your transitions will work smoothly.
.all a:hover img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px
border-radius: 100px;
}
You may want to set them to any value that is double the height and width of your images to ensure they will always be rounded when hovered.

Animation partly works but not completely

At the moment I have this, a small DIV that slides in from the top to the center of a container DIV when the mouse hovers over the container DIV; but on mouseout, it slides back out to where it came from. What I'd like to do is have the DIV slide out of the other side of the DIV, directly opposite where it entered.
Is this possible using just CSS? (I imagine with JQuery it would be more straightforward)
<div class="blocks">
<div class="blocks_title">
</div>
</div>
<div class="blocks">
<div class="blocks_title">
</div>
</div>
.blocks {
position: relative;
float: left;
margin: 20px;
width: 100px;
height: 100px;
border: 1px dotted #333;
overflow: hidden;
}
.blocks_title {
position: relative;
width: 20px;
height: 20px;
top: 0px;
left: 40px;
background: #333;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
transition: all .25s;
}
.blocks:hover .blocks_title {
top: 40px;
opacity: 1;
}
And just when everyone is convinced that it's not gonna work with css only:
http://jsfiddle.net/Xkee9/36/
I used an animation for the mouseenter and a transiton for the mouseleave
Edit: added firefox fix
Edit: Explanation:
(I always use -webkit- -prefixes, just to explain it in Chrome and Safari, Firefox uses the -moz- -prefix, opera the -o- - prefix)
When nothing happens:
the block is at the bottom of the div.blocks (top:80px;), with an opacity of 0, also there is no animation running
When hovering:
the block moves instantaneous to the top with no transition (see:-webkit-transition: none;), because then the animation down-1 is running. That animation moves the block from top:0 to top:40px; in .25s. After the animation, the block stays at top:40px; because that's what I added in .blocks:hover .blocks_title.
When mousleaving:
there is no animation running anymore, but the block moves from top:40px to top:80px; in .25s because of -webkit-transition: all .25s;

-moz-transition-duration not working?

below you have the code I'm using to try and achieve a 3D animation:
Here is the fiddle and the code:
http://jsfiddle.net/82C2N/
<html>
<head>
<title>3D CSS Animation</title>
<style>
#movieposters li {
display:inline; float:left;
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective;
-webkit-transition-duration: 0.5s;
transition-duration: 1s;
-moz-perspective: 500;
-moz-transform-style: preserve-3d;
-moz-transition-property: perspective;
width: 200px;
}
#movieposters li:hover {
-webkit-perspective: 5000;
-moz-perspective: 5000;
transition-duration: 1s;
transition-timing-function: linear;
width: 200px;
}
#movieposters li img {
-webkit-transform: rotateY(30deg);
-webkit-transition-property: transform;
transition-duration: 0.5s;
-moz-transition-duration: 1s;
-moz-transform: rotateY(30deg);
-moz-transition-property: transform;
width: 200px;
}
#movieposters li:hover img {
width: 200px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
</style>
</head>
<body style="height: 100%" class="bluegradient">
<ul id="movieposters">
<li>
<img src="http://fc02.deviantart.net/fs36/i/2008/252/6/1/House_MD_DVD_covers_by_kdaver.jpg"/>
</li>
</ul>
</body>
To see the desired effect open that in Chrome. In Firefox, the -moz-transition-duration seems to have no effect. The perspective and rotation value change on hover but withou any animation.
Any idea why? I'm using the latest version of Firefox (10.0.2).
It is a problem with the value transform, in Mozilla it is prefixed with -moz-transform.
#movieposters li img {
-moz-transition-property: -moz-transform
}
Here is the fiddle:
http://jsfiddle.net/cadence96/82C2N/1/

Resources