Im testing a template for use on mobile phones, but can't get it to work in Chrome for IOS. I suspect it to be webkit-transition.
It works fine i Google Chome for PC
Link to template
.ac-container article{
background:#fff;
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
Are you using (~) as in #menuToggle:checked ~ #primary_nav_wrap { position: absolute; left: 0;} to trigger the transition. An upgrade to iOS 9 prevents that from working..... Try using (+) instead of (~)
Related
I have been struggling with this for quite a bit now.
.intro #intro-n,
.intro #intro-o,
.intro #intro-a2 {
stroke-dasharray: 400;
stroke-dashoffset: 400; }
.intro #intro-n {
/*-webkit-animation: intro-letters 0.9s linear;*/
-webkit-animation-name: intro-letters;
-webkit-animation-duration: 0.9s;
-webkit-animation-timing-function: linear;
-moz-animation: intro-letters 0.9s linear;
animation: intro-letters 0.9s linear;
animation-name: intro-letters;
animation-duration: 0.9s;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s; }
#-webkit-keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
#-moz-keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
#keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
http://codepen.io/anon/pen/ORkZwG
This code perfectly works on Windows(except IE) and Android devices, but when i try to launch it in iOS safari or even chrome SVG animations are blank.
Edit:
Yes, it works in iOS desktop Google Chrome version, but it doesn't work on iOS Tablet Chrome nor Safari
After spending a fair amount of time on this issue, I finally cracked it down, it seems that the issue was in this bit of code:
.intro svg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
max-width: 250px;
/*-webkit-animation: intro-hide-element 0s linear;*/
-webkit-animation-name: intro-hide-element;
-webkit-animation-duration: 0s;
-webkit-animation-timing-function: linear;
-moz-animation: intro-hide-element 0s linear;
animation: intro-hide-element 0s linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 5.1s;
-moz-animation-delay: 5.1s;
animation-delay: 5.1s; }
Particularly here:
-webkit-animation-duration: 0s;
-moz-animation: intro-hide-element 0s linear;
animation: intro-hide-element 0s linear;
Where after changing it to:
-webkit-animation-duration: 0.001s;
-moz-animation: intro-hide-element 0.001s linear;
animation: intro-hide-element 0.001s linear;
The animations in safari tablet browser appeared, I'm not entirely sure why it works in chrome and not safari, but that was what did the trick for me, hopefully someone can explain a bit more in detail why this is happening but in the mean time hope it helps someone.
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 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;
}
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
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.