How do I get this code to work on iOS?
My iPad won't show the translate property.
I have read about using -webkit-backface-visibility: hidden; and -webkit-transform: translate3d, but its not working.
.logo-box {
display: inline-block;
vertical-align:middle;
width:115px;
margin: 0px 10px 0px 10px;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
.logo-box:hover {
transform: translate(0,-20px);
-webkit-transform: translate(0,-20px); /** Safari & Chrome **/
-o-transform: translate(0,-20px); /** Opera **/
-moz-transform: translate(0,-20px); /** Firefox **/
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
In some cases, adding perspective helped me out. You may want to try adding it and see it if works. You can read about it here:
http://www.w3schools.com/cssref/css3_pr_perspective.asp
Related
I use this CSS code for create a hover for images in bootstrap but this hover is not work on IOS safari and chrome browser . it is working on android . i want to know where am i wrong and what should i do ?
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(130,139,164,0.5);
-webkit-transition:all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
-moz-transition:all .4s linear;
-o-transition:all .4s linear;
}
.hovereffect h2 {
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(41,35,92,0.8);
-webkit-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform:translateY(-100px);
-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;
padding:10px;
}
.hovertext {
color:#fff;
text-align:center;
position:relative;
font-size:17px;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-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;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform:scale(1.2);
border-radius: 15px;
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
cursor: pointer;
visibility: visible;
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translateY(0);
-webkit-transform:translateY(0);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform:translateY(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
-moz-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay:.2s;
}
#rounded {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.rounded {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
You need to use the :focus selector for iOS. Just add it to your classes the same way you would the :hover selector.
Thank you in advanced for taking the time to look at this. I am having issues when dragging a jQuery UI draggable object from my fixed sidebar to my image as shown below. The problem is two-fold:
1) Even though the z-index is set to 9999, the object is no longer visible when it is dragged out of the fixed sidebar.
2) When the draggable object is dropped, its position is shifted up and to the left about ~30 or 40px.
Issue one (1) visualized:
Issue two (2) visualized:
I have tried changing the CSS position attribute to all types (absolute, relative, static etc) in all combinations and cannot seem to get it to work as intended.
I was hoping someone might be able to point me in the right direction in regards to these two issues. If you would like to see a live example of these issues, please see this JSFiddle:
http://jsfiddle.net/m6pgfu5m/3/
Here are the most pertinitent CSS attributes:
.signatureTool {
z-index: 999999999;
}
.image {
border: 1px solid #DADADA;
position: relative;
width: 100%;
margin-bottom: 50px;
}
#wrapper {
margin-top: -17px;
padding-left: 250px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
z-index: 999;
position: fixed;
left: 250px;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #E9E9E9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow: hidden;
}
#page-content-wrapper {
width: 100%;
position: relative;
padding: 20px;
margin-right: 0;
}
I want to have vertical text and am using the Transform property to do this. However I cannot get it to work on on Safari and iphones / IPads.
Can anyone help?
The page is: http://www.hydrossolutions.com/
h3.aviaccordion-title {
-webkit-transform-style: preserve-3d;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: translateY(90deg);
-webkit-transform-origin:left bottom 0;
-moz-transform: translateY(90deg);
-moz-transform-origin: left bottom 0;
-ms-transform: translateY(90deg);
-ms-transform-origin:left bottom 0;
-o-transform: translateY(90deg);
transform: translateY(90deg);
transform: rotate(90deg);
transform-origin: left bottom 0;
padding:0 !important;
margin:0 !Important;
white-space: nowrap !Important;
display: block;
}
After lots and lots of searching I found that I needed to use: webkit-transform: rotate(90deg); instead of -webkit-transform: translateY(90deg);
h3.aviaccordion-title {
-webkit-transform-style: preserve-3d;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: translateY(90deg);
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left bottom;
-moz-transform: translateY(90deg);
-moz-transform-origin: left bottom;
-ms-transform: translateY(90deg);
-ms-transform-origin:left bottom;
-o-transform: translateY(90deg);
transform: translateY(90deg);
transform: rotate(90deg);
transform-origin: left bottom;
padding:0 !important;
margin:0 !Important;
white-space: nowrap !Important;
display: block;
}
I have a list item (ul li) that is in my header of my site, and when it is in any browser, it works well, it works fine. But when I access the website on my ipad, the first and last link go down.
here is what I mean:
and this is on my iPad:
Here is the code:
#header #personals nav ul li {
display: inline-block;
margin: 0;
}
#header #personals nav ul li a {
padding: 25px;
margin: 0;
}
.settings {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
background: url('images/settings.png') no-repeat center 15px;
height: 20px;
width: 50px;
padding: 15px;
padding-bottom: 103px;
}
.calendar {
background: url('images/calendar.png') no-repeat center center;
padding: 15px;
height: 30px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 50px;
}
Here is the jsfiddle: JSFiddle
Try this
Remove the padding-bottom property on the .settings rule and change the 15px value on the background property to center.
.settings {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
background: url('http://i58.tinypic.com/21o4ikl.png') no-repeat center center;
height: 20px;
width: 50px;
padding: 15px;
}
I'm attempting to make a drop down navigation menu with some CSS3 transitions. However, when using visibility hidden/visible, iOS doesn't display the drop down (it just goes to the link). If I use display none/block, iOS will display the drop down menu on the first click of the parent element, but the transitions don't work in any browsers.
Is there a way to get these transitions to function correctly in browsers and the drop-downs to work in iOS without using javascript?
Drop down doesn't work in iOS:
nav ul li ul {
position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }
Transitions don't work in browsers:
nav ul li ul {
position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99;
-webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }
After thinking about this some more I found documentation that I hadn't seen before -- some of the weirdness you're experiencing might be because you are attaching behavior to a pseudo-element on something that isn't interactive by default (only anchors and form elements are clickable).
http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html
(Ignore my original comment about event.preventDefault...I forgot you were working with list items instead of anchors.)
I do, however, still think JS is the best approach since you can be very specific about events attached to any kind of element. You can just apply a CSS class and it will use the transition properties you already specified.
Like this:
// CSS
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; }
// JS
// you could bind mouseover/out here too if you want it to work on both desktop & mobile
$('nav ul li').bind('click', function(){
$(this).children('ul').toggleClass('visible');
});
If you want to be extra awesome you could make it keyboard accessible by adding tabIndex="0" to the list items :)
I found a solution for this. Essentially ios does not bind the click to the hover for anything that is display:block/none or visibility:hidden/visible. So you need to just "hide" the dropdown using the "left" to compensate for <=ie8 that does not support opacity.
So essentially use your 2nd example with a minor tweak:
nav ul li ul {
position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99;
-webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;}
Then just be sure not to use "all" in your transitions or it will animate the left attribute as well :)
The only issue with this method is that your transitions will only work on the way in not the way out.