i'm working on a restaurant's website and have run into this annoying problem when visiting the site on my phone. here's what i see: http://i.imgur.com/rc1sS.png (reproducible in iOS5, iOS6, some Androids)
the menus are .JPG's loading in Twitter Bootstrap modals, and the code looks like this:
<div id="menu" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<img src="assets/menus/brunch.jpg">
</div>
</div>
<a data-toggle="modal" href="#menu" >BRUNCH</a></p>
everything loads fine in all desktop browsers, and weirdly enough they appear on the mobile Chrome app in iOS6. i've asked a couple of my Android using friends, and it's about 50%. i have no idea why there doesn't seem to be a pattern. is it an issue with how the images are being called? (i don't think it has anything to do with the modal itself?)
help!
ok, turns out the images were CMYK, which mobile does not like. changed to RGB and everything loads fine now!
I have a few radio buttons that are displayed like regular buttons, they look like this:
<div class="buttoncontainer" style="position:relative; left: 80px;">
<label><input type="radio" name="toggle" checked="checked" class="_today"> <span class="css3button-left">Today</span></label>
<label><input type="radio" name="toggle" class="_tomorrow"><span class="css3button">Tomorrow</span></label>
<label><input type="radio" name="toggle" class="_weekend"><span class="css3button">This Weekend</span></label>
<label><input type="radio" name="toggle" class="_nextmonth"><span class="css3button-right">Next Month</span></label>
</div>
I change the buttons appearance when selected like this:
.buttoncontainer input:checked + span
{
...
}
This works in every browser I tested - IE, FireFox, Chrome, and even Safari on my computer , but the appearance will never change to :checked on the Ipad or Iphone using Safari . Does any one have any idea why these buttons don't work only on ipad ?
I suppose you mean that the lables are not clickable?
For some reasons the usual behaviour of the label element does not work on the mobile WebKit out of the box.
Adding label { cursor: pointer; } to the CSS fixes the issue.
I have a single-page scrolling website. It uses a fixed-position nav bar with jquery to scroll to different sections of the website. The site works fine except for on the iOS (I haven't tested it on Android). On iOS, after clicking a link, the navigation freezes until you manually scroll up or down. For some reason the link stays active until you scroll. Is this a bug in Mobile Safari? Is there some workaround?
Here's the basic HTML:
<body>
<ul class="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<div class = "page" id = "home"> </div>
<!-- About -->
<div class = "page" id="about">
<div class="pagebreak"></div>
</div>
<!-- Portfolio -->
<div class = "page" id="portfolio">
<div class="pagebreak"></div>
</div>
<!-- Contact Me -->
<div class = "page" id="contact">
<div class="pagebreak"></div>
</div>
</body>
Here's the actual site if you would like to see the problem: http://boundincode.com
BTW, I don't think this is a jquery or javascript issue because even if I remove the javascript and the jquery, the problem persists.
I'll add another answer since it's completely separate from my original one.
Since you need a temporary workaround, you might find what you're looking for in iScroll 4. I'd used it to do what you're trying to accomplish in pre-iOS 5 days so it might be worth looking into.
position: fixed support was only added to Mobile Safari in iOS 5, so it's likely that the implementation of it is still buggy, especially if you're seeing the same problem in other sites. Probably worth filing a bug report with Apple.
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
In a html page I am making, I tried to make div's clickable using html and css. This has worked perfectly in some major browsers I have tested it in (Chrome, Firefox, Opera, Safari), as well as an HTC phone, but when I tried to test it on Iphone I noticed it just didn't work. The checkboxes themselves weren't even selectable.
This is my (working apart from on Iphone) code:
HTML:
<div class="" style="height: 30px;">
<div style="display: table; width: 100%;">
<div style="display: table-row; width: 100%;">
<div style="display: table-cell;">
<label for="3171">Text....</label>
</div>
<div style="display: table-cell; text-align: right;">
<input type="checkbox" id="3171" name="3171">
</div>
</div>
</div>
<label for="3171">
<span class="blocklink">Invisible text</span>
</label>
</div>
CSS:
.blocklink {
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-indent: -999em;
top: 0;
width: 100%;
}
So as you can see the technique I'm using is basicly just having a <label> spread all over the parent div so anywhere you click, it will tick/untick the linked checkbox.
Unfortunately, this doesn't work on IPhone. Would it be possible to somehow keep using this technique but also provide IPhone support? (Preferrably without javascript, because I'm really going out of my way to only use HTML & CSS)
Thanks in advance,
Arne
Adding an empty onclick="" to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.
<label for="elementid" onclick="">Label</label>
The problem seems to persists in iOS9 if any html elements are contained inside a label. At least happens with span elements inside it. 'pointer-events: none' fixes it.
<label for="target">
<span>Some text</span>
</label>
The code above would not be trigger a change of the target input, when the user taps 'Some Text', unless you add the following css:
label span {
pointer-events: none;
}
I solved it by placing an empty onclick="" on a parent element:
<form onclick="">
<input type="radio" name="option1" value="1">
<label for="option1">Option 1</label>
<input type="radio" name="option2" value="2">
<label for="option2">Option 2</label>
<input type="radio" name="option3" value="3" checked="checked">
<label for="option3">Option 3</label>
</form>
For some obscure reason, using CSS, if you apply:
label { cursor: pointer; }
Is going to work both on iPhone and iPad.
Another solution — albeit more hacky, but bulletproof — would be to absolutely position the checkbox over the label, z-index it, increase the width/height to encompass the underlying label and then 0 the opacity. This, of course would be tedious if there are multiple labels on the page... You naturally would also only implement the absolute positioning for that media size; no need to hack the whole app environment.
I ran into a somewhat unique situation. We were already using pointer-events: none on all spans in labels. However, we then needed to add in a <a> as clickable within one of those labels.
<label>
<span>Label text here. With a link text here.</span>
</label>
So, we explicitly set pointer-events: all on those <a>.
label > span { pointer-events: none; }
label > span > a { pointer-events: all; }
This is working in latest Chrome, Firefox, IE 11, and iOS 9 Safari.
If you change DOM on event handler (example in onMouseEnter) this cause skip all next handlers include onClick.
SetTimeout don't fix this.
Example:
1. in onMouseEnter use setTimeout with function injected new div in DOM
2. any onClick handler don't called.
Solution: avoid change DOM in events handler.
Remark: it problem found for label tag, but still persist for span inside label. May be this problem present on any type tags.
This behavuor found only for mobile iOS. In desktop Safari and in Mac OS Safari - all ok.
I narrowed down my problem to use of the Fastclick library; when I removed it from my codebase my issues went away, which indicates to me there isn't a native iOS/FF problem as suggested by other answers here.
Without knowing the libraries other folks are using, but knowing that Fastclick is exceptionally common, can I suggest that the root cause of this bug is in fact a library issue - not one which has managed to persist through years of Apple releases! It seems more likely. Maybe the others here can shed some light on whether they are using Fastclick?
More info
Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event from the console with document.querySelector('input[type=file]').click() and it'll work, do the same from your code and it will mysteriously fail.
I imagine the reason this bug exists is because an ontouchstart handler is being applied to the <label /> by Fastclick. When it is triggered on a touch device, the library will proxy that event to the onclick handler, or in this case the native <label /> functionality. Unfortunately, this means that client code is triggering the file input opening, and it's being blocked by the browser.