In the html page, I have the hyperlink <a> tag. when clicking the PC browser like Firefox, IE that will open a link in same window. But same code if open in a iPad Safari browser, it will open a new window.
<div class="title-page-header">
<img width="122" height="68" src="Gray2.svg" class="header-logo">ログアウト
</div>
What is the reason behind this?
I'm developing a Cordova / Phonegap app. In some point of my app I load a page where I want a google calendar to be shown so user can see the agenda.
I just copy-pasted the iframe from google calendar, but, while it shows correctly my calendar in browser testing, when I create iOS app, it doesn't show itself, nor in simulator, nor in device.
Why is this happening?
....
</div>
<iframe src="https://www.google.com/calendar/embed?src=whitedragongroup%40gmail.com&ctz=Europe/Madrid" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</body>
PS:
I tried placing div inside previous div but result is the same.
I have recently taken up web design and I am in no way an expert. I am developing this site for myself and I seem to be having some problems. This site looks about the same (it's still under development) across all browsers and I've been working on tablet and mobile phone specific css. While doing testing for the iPad (I use the xCode iOS Sim) I noticed that my menu bar was not working except in what seem like random moments (usually when I was zoomed in). I had a family member test this on their physical iPad and they couldn't use the nav bar at all. This jsFiddle link contains the html and css that run the navbar. I will be spending the next few hours working on this and will update or remove this post if I figure it out, but if I do not, any help is appreciated.
This is the html only, the css is too long.
<h2>Auburn PC Repair<br>& Building</h2>
<div id="header-image">
<h1></h1>
</div>
<nav id="buttonbar">
<ul>
<li id="services-button"><div class="buttonHighlight"></div>
<h3>Our Services</h3><p>how can we help you</p>
<ul>
<li>PC Repair</li>
<li>Mobile Device</li>
<li>Networking</li>
<li>PC Building</li>
</ul>
</li>
<li id="contact-button"><div class="buttonHighlight"></div>
<h3>Contact Us</h3><p>phone and email</p>
</li>
<li id="about-button"><div class="buttonHighlight"></div>
<h3>About Us</h3><p>all about us</p>
</li>
</ul>
</nav>
EDIT: The navbar was designed around www.panic.com/coda navbar. It works just fine on the iPad.
EDIT: The current setup works on all non-iOS devices.
Your navigation relies on hover events to trigger menu content to appear.
A hover event is triggered by the mouse moving over an element.
Touch devices, such as all iOS devices, as well as most, if not all, contemporary smartphones and tablets, do not have a mouse and as such there is no way for a hover event to be triggered.
You cannot achieve what you want on contemporary touch devices using only CSS.
There are various touch-related events that can be fired and responded to using JavaScript. You will need to opt not for a CSS-based menu-triggering approach and instead use a JavaScript-based approach where both hover and touch events are handled to produce the menu system you desire.
I am using my webpage to show a pdf from App_Data.
I using this html:
<iframe src="" id="iframePDF" style="width:100%; height:93%;z-index:1;></iframe>
And javascript
$('#iframePDF').attr("src", responseData.TempPath + "#zoom=100&page=1");
The zoom isn't zooming the page and I cannot scroll.
Is there any workaround for this or a solution?
You might be able to scroll using two fingers, which is not intuitive for the user. You can not make the area scrollable unless you know the size of the content, which you can't, because iOS doesn't tell you.
Sorry, friend, but then you'd have to look into a native or hybrid app like the solutions offered by Cordova (PhoneGap). It doesn't matter if the file is in .NET App_Data or anywhere else online.
The reason why it works in your browser is because it has a built-in file viewer which is loaded when you open the file in a new window.
Wrap the iframe in a width-constrained element of some kind then apply this CSS to that element:
-webkit-overflow-scrolling: touch
In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. Even though the version # is the same.
I'd like to compose a list of those differences (for myself and others) to have as a developer reference.
e.g. in Safari on the iPad
iPad Safari takes full control of Select list/option styling
iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
iPad Safari doesn't support position:fixed like desktop Safari < iOS 5
iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message
I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.
A few more for you:
No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)
In general. Treat it like a scaled up iPhone, not a scaled down Desktop.
I thought this might be useful: Apple's guide to preparing web content for the iPad
Just been caught out by the position:fixed issue my self
Safari on iPad has the same issue with button width/padding as on the iPhone
iPhone <button> padding unchangeable? describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:
<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
<button style="-webkit-appearance: none; border-width: 0"> </button>
</span>
(the blue border is to show where the button is, it's not critical to the hack)
jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446
It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).
iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.
There's not a lot about this in Google (yet).
iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.
Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too.
This code will only move cursor to the end of text in TextArea.
<div>
<textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
</textarea>
<button onclick="testSelectText(event);">select text</button>
</div>
<script>
function testSelectText(e) {
var box = document.getElementById("text-embed-code");
box.select();
e.preventDefault();
return false;
}
</script>
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:
<div class="main"> <!-- background-color: white -->
<div class="left"></div> <!-- background-image: url(some_transparent_png) -->
<div class="content">...</div>
<div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>
The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.
When i add
-webkit-background-size: 100% 100%;
to the left and right layer, the border disappears.
You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;
This rule fixes animation flickering in Safari on iOS devices:
body {-webkit-transform:translate3d(0,0,0);}
There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.
24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.
I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.
One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.
Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content.
Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing.
Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).
I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs
position: fixed;
Does not work in iOS 4 but does work on iOS 5.