I have build a pretty simple animation with CSS (just moving an image a few pixels) which works fine on all browser I had available for testing EXCEPT the iPad mobile Safari (iOS 8.1).
On the iPad nothing even slightly moves. The image sits still.
Has anybody else encountered such a bug or behaviour with iOS? ... or am I missing something important with webkit here?
Thanks for hints ;o)
This is what I did so far:
body { font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; text-align:left;
SCROLLBAR-FACE-COLOR: #001428; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #001428;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #001428; text-align:center; width:100%; margin:0 auto}
.BodyHeader {background-image: url(../images/Header-Singleton.jpg); background-repeat: repeat-x; position:absolute; height:90px; width:100%; border: 0px solid #cc0033;}
.BodyHeaderPic { background-image: url(../images/Header.jpg); background-repeat: repeat-x; position:absolute; right:200; height: 90px; width:322px; border:0px solid #cc0033;}
.BodyScroller {position:absolute; left:1%; top:90px; width:98%; bottom:10px; overflow:auto; border: 0px solid #FF9933;}
.BodyMain { position:absolute; left:0; top: 30px; width:70%; border:opx solid #cc0033; text-align:left; vertical-align:text-top; z-index:1}
.Footer { position:absolute; width:640px; left:50%; margin-left:-320px; bottom: 5px; height:25px; border:1px solid #dcdcdc; text-align:center; font-size:10px; color:#7896be; z-index:9999;}
.Footer p { margin:5px;}
a {font:Arial, Helvetica, sans-serif; color:#2d5578; text-decoration:none; border: none}
a:hover {font:Arial, Helvetica, sans-serif; color:#7896be; text-decoration:underline; border: none}
a:active {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
a:selected {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
img {border: none;}
h1 {font-style:normal; font-variant:normal; font-size:12pt; font-family:Arial; color:#2d5578; padding-top:5px; padding-bottom:5px; margin:0px; }
h2 {font-style:normal; font-variant:normal; font-size:11pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
h3 {font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
.vbar-lightblue {width:300px; height:2px; background-image:url(../images/vbar-lightblue.jpg); background-repeat:no-repeat}
.HPflyInImages {position:absolute; left:50%; margin-left:200px; top: 220px; width:217px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:999;}
.HPflyInImagesCrossFrame1 {position:absolute; left:50%; margin-left:135px; top: 180px; width:317px; height:241px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:100; background-image:url(../images/imageCrossFrame.png)}
.image1 {position: relative; right:-200px; top:00px; border: 0px solid #cc0033; text-align:right; width:200px;}
.CrossFrameSmall1 {position:absolute; right:50px; top: 150px;z-index:100;}
.CrossFrameSmall1MoveImage{position:absolute; right:150px; top: 205px;z-index:99;
-moz-animation-name: moveImage;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: moveImage;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-name: moveImage;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards
}
#-moz-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#-webkit-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
.HPflyInImagesSmall {position:absolute; right:50px; top: 200px; border: 1px solid #cc0033; overflow:hidden;}
.HPflyInImagesCrossFrameSmall1 {width:200px; height:180px; border: 1px solid #cc0033; overflow:visible; text-align:right; }
.HPflyInImagesCrossFrameSmall2 {width:195px; height:180px; border: 1px solid #cc0033; overflow:hidden; background-image:url(../images/imageCrossFrameSmall.png)}
.CrossFrameSmallMoveImage { }
/* *** Menu *** */
.Menubar {position: absolute; left:0px; top:90px; width:100%; background-color:#cc0033; text-align:left; background-image:url(../images/MenueBackground.jpg); background-repeat:repeat-x; }
.Menubar ul { left:10px;}
/* *** MAIN *** */
.mainHephy {position:absolute; right:100px; width:170px; height:220px; top:20px; background-image:url(../images/mainHephy.jpg); background-repeat:no-repeat; border: 0px solid #cc0033;}
.wiseSpell {position:relative; top: 310px; border:0px solid #996600; text-align:left; width: 95%;}
.quotation { font-size:8px; margin:0px; padding:5px; color:#7896be}
.mainGreetings {position: relative; top: -50px; text-align:left; width:400px; padding-left:50px; }
/* *** PRIVATE *** */
.tdHeader { font-weight:bold; color:#325f82}
.moreBody { width:600px;}
.imageGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** AVIATION *** */
.FlightBooklet {position:absolute; left:50%; margin-left:100px; top: 80px; width:244px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:101;}
.imageAVGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** CONTACT *** */
.FMS-TextLine { width:400px;}
.FMS-TextField { width:600px; height:150px;}
.FMS-Button { width:100px;}
and this is the HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/CSS/CSS3Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<link rel="stylesheet" type="text/css" href="/CSS/ASW.css">
<title>ASW 15</title>
</head>
<body ontouchstart="">
<div class="BodyHeader"></div>
<div class="BodyHeaderPic"></div>
<script language="javascript" type="text/javascript" src="/JS/ASW-MenueEmbed.js"></script>
<script language="javascript" type="text/javascript" src="/JS/ASW-FooterEmbed.js"></script>
<div class="BodyScroller">
<div class="BodyMain">
<br />
<div class="moreBody">
<h1>... more</h1>
<br />
</div>
</div>
</div>
<img src="../images/imageCrossFrameSmall.png" alt="Hephy" class="CrossFrameSmall1"/>
<img src="../images/more01.jpg" alt="Hephy" class="CrossFrameSmall1MoveImage"/>
</body>
</html>
I have just built my first responsive website but there is one issue I am facing, the CSS dropdown menus work on android and Chrome's emulation but not in safari on iPhones or iPads. Here is a link to a working copy and here is the code:
HTML
<nav role="navigation" id="top-nav" class="floatRight">
<div class="nav top-nav cf">
<ul>
<li class="page_item page-item-25 current_page_item">Home</li>
<li class="page_item page-item-35">Contact Us Now</li>
<li class="page_item page-item-37">Services</li>
<li class="page_item page-item-41">Gallery</li>
</ul>
</div>
</nav>
CSS
#top-nav {
margin-top: 60px;
z-index:200;
}
#top-nav li {
float: left;
background-image: none;
padding-left: 0;
}
#top-nav li a {
font-size: 14px;
padding: 8px 12px;
color: #797f94;
display: block;
}
#top-nav li:hover {
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
border-radius: 5px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: none;
}
/* ==========================================================================
Tablet changes
========================================================================== */
#media screen and (min-width: 640px) and (max-width: 1024px) {
#top-nav {
width: 70px;
border-radius: 3px;
position: absolute;
right: 20px;
z-index: 300;
}
#top-nav::before {
content: "Menu";
}
#top-nav ul {
width: 100%;
}
#top-nav::before:hover div, #top-nav::before:focus div, #top-nav:hover div, #top-nav:focus div {
z-index: 400;
display: block;
}
#top-nav li {
background-image: none;
position: relative;
}
#top-nav li:hover {
background-image: none;
}
}
/* ==========================================================================
Tablet & mobile changes
========================================================================== */
#media screen and (max-width: 1024px) {
#top-nav {
padding: 8px 12px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
}
#top-nav li a {
color: #ffffff;
}
#top-nav::before {
color: #ffffff;
background-image: url(../images/menu.gif);
background-position: 0% 3px;
background-repeat: no-repeat;
padding-left: 29px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: underline;
}
#top-nav div {
display: none;
}
#top-nav:hover div {
/*position: absolute;*/
}
#top-nav:hover {
height: 210px;
}
}
/* ==========================================================================
Mobile changes
========================================================================== */
#media screen and (max-width: 639px) {
#top-nav {
margin-top: 0;
overflow: hidden;
float: none;
}
#top-nav::before {
content: "J Gibson Electrical";
font-family: segoe-script, "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
}
#top-nav ul {
width: 100%;
}
#top-nav li {
clear: left;
}
#top-nav:hover div {
display: block;
}
#top-nav li:hover, #top-nav li:focus {
background-image: none;
}
}
Solution
As the accepted answer says, JavaScript was the solution. Here was my solution:
//This goes in an onload or onresize event
if(viewportWidth <= 1024)
$("#top-nav").click( function() {
toggleMenu();
});
}
function toggleMenu()
{
menuItems = $("#top-nav div");
if(menuItems.css("display") == "none")
{
menuItems.css({
"display": "block"
});
}
else
{
menuItems.css({
"display": "none"
});
$("#top-nav").css({
"height": "auto"
});
}
}
The issue is with the fact that you can't "hover" on an iPad, you have to use js onclick events and styling to make them drop down on click. Here are some links that might help https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent http://www.w3schools.com/jsref/prop_style_width.asp
I was having the same issue and I decided to use a slide menu http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
hover states don't work on touch enabled devices. You'll have to use touch events in js or just a regular click event.
Hello Phill you need to use other pseudo selector
Check the following stackoverflow post :touch CSS pseudo-class or something similar?
Seb
Found a different issue related to this topic that I thought I would post for future reference.
ISSUE > Dropdown's work in all browsers except Safari Mobile.
Tracked the issue to the A tag not having a href element. This appears to only be an issue on Safari mobile. Without the href tag the element is not treated as a clickable element.
Cheers!
Using Themeroller I can make my own color theme to be used instead of the default one. But I want to add a couple of data-theme swatches (e.g. "f" and "g") and use them with the default ones. Can I do it with the Themeroller?
If you look at jquery mobile's css file , you'd see a structure like this :
/* Swatches */
/* A ---------------------------------------------*/
.ui-bar-a {
border: 1px solid #333 /*{a-bar-border}*/;
background: #111 /*{a-bar-background-color}*/;
color: #fff /*{a-bar-color}*/;
font-weight: bold;
text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #000 /*{a-bar-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c /*{a-bar-background-start}*/), to( #111 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/);
}
.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-bar-a .ui-link-inherit {
color: #fff /*{a-bar-color}*/;
}
.ui-bar-a a.ui-link {
color: #7cc4e7 /*{a-bar-link-color}*/;
font-weight: bold;
}
...
/* B -----------------------------------------*/
...
/* C -----------------------------------------*/
...
/* D -----------------------------------------*/
...
/* E -----------------------------------------*/
...
/* Structure */
/* links within "buttons" -----------------------*/
You could add theme "f" (or whatever you want to name it) before /* Structure */, or in a separate CSS file referenced after jQM's css. This will not affect the previous styles. But be sure to name the elements this way :
.ui-bar-themename
Else, you'll over ride the existing styles.
In Themeroller I added additional styles for letters F and G and tuned them as I needed (A - E were left untouched). Then I downloaded the zip file with styles, copied the /* F and /* G sections (thanks to #hungerpain), put them in a separate .css and linked it after the jQM .css.
All jquery mobile themes executed by jquery-mobile.js files. In .js files defined only 5 themes. A and B and C and D and E.
if you want to add your custom theme for example "F" in to this group themes, you should add this themes id in to jquery-mobile.js for executing. do you undrestand?
In simple case you can made your custom theme by chenging in for example "A" or "B" themes parameters.
I have created a gradient background using a CSS generator. This works perfectly in all major browsers and on Android. However in iOS i get this.
What do I need to add to this gradient in order to make it working on iOS?
Edit: Because this question isn't gaining enough attention, I'd like to ask a different question: What do I need for css tag to create a linear gradient for safari/ios, when, as in this case, -webkit-linear-gradient is not working? Are there any other css gradient tags, specifically for safari?
Here's the code for my background:
.gradient {
/* Legacy browsers */
background: #FF7701 url("gradient-bg.png") repeat-x top;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/* Internet Explorer */
*background: #FF7701;
background: #FF7701\0/;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
}
#media all and (min-width: 0px) {
.gradient {
/* Opera */
background: #FF7701 url("gradient-bg.svg");
/* Recent browsers */
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(#FFAD26),
to(#FF7701),
color-stop(0.5, #FEA026),
color-stop(0.5, #FFFFFF),
color-stop(0.5, #FFFFFF),
color-stop(0.5, #FFFFFF),
color-stop(0.5, #FF8B00)
);
background-image: -webkit-linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
background-image: -moz-linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
background-image: -o-linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
background-image: linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
}
}
In mobile Safari at least, you can't use the keyword transparent, you have to use rgba(255, 255, 255, 0) instead.
This is described here: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html
As you can see, even in Apple's own official document, rgba(255, 255, 255, 0) is used instead of transparent.
Do give this a check in iOS but it ought to work:
background: #ffad26; /* Old browsers */
background: -moz-linear-gradient(top, #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0 ); /* IE6-9 */
I'd also recommend looking into a pre-processor like SASS which will generate a lot of these things for you.
Alternative 1
As an alternative, you could try using an inset box shadow. It's not exact, and it has it's limitations but it's just an option :)
background-color:#FF8B00;
-webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);
Alternative 2
If you know the height, either use the box shadow above or just use a background image. That way you'll get cross-browser support without the mess that is a hundred prefixed CSS properties like above :)
Working DEMO here http://jsfiddle.net/yeyene/akRHX/
And its iPhone screenshot...
add your css class to the element.
HTML
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar gradient" style="height:200px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar gradient" style="height:200px">Block B</div>
</div>
</div><!-- /grid-a -->
</div><!-- /content -->
</div><!-- /page -->
CSS
.gradient {
/* Legacy browsers */
background: #FF7701 url("gradient-bg.png") repeat-x top;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/* Internet Explorer */
*background: #FF7701;
background: #FF7701\0/;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
}
#media all and (min-width: 0px) {
.gradient {
/* Opera */
background: #FF7701 url("gradient-bg.svg");
/* Recent browsers */
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(#FFAD26),
to(#FF7701),
color-stop(0.5, #FEA026),
color-stop(0.5, #FFFFFF),
color-stop(0.5, #FFFFFF),
color-stop(0.5, #FFFFFF),
color-stop(0.5, #FF8B00)
);
background-image: -webkit-linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
background-image: -moz-linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
background-image: -o-linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
background-image: linear-gradient(
top,
#FFAD26,
#FEA026 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FFFFFF 50%,
#FF8B00 50%,
#FF7701
);
}
}
For me the following worked and this worked for me in desktop browser, android and ios:-
display: list-item;
background-image: linear-gradient(45deg, #2b4bff, #1b681f);
background-clip: text;
color: rgba(255, 255, 255, 0);
I was using display:flex and that did not work and I had to change
to list-item.
Color I was using 'transparent' and now I am using
rgba(255, 255, 255, 0)
Some helpful notes:
The property background-clip: text; only works in Safari when applied directly to the element you want styled. You cannot apply it to a parent element and style all children at once. (This does work in Chrome and Firefox)
enter link description here