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.
Related
I am writing an Angular (v.9) web application which contains few tiles on the scrolling panel. When given option is out of order I set blurred grey background with text on it. It works fine on desktop chrome/firefox/edge and mobile chrome/firefox. However when I test it on iOS with Safari text becomes too large for the tile. Even though I set font-size property on the "p" element itself:
<p style="font-size: 14px">
sometimes computed style says 21px.
As you can see, I marked that with red rectangles. Moreover, the issue does not appear on all tiles - as you can see blue one looks fine - font size is 14px. Unfortunately the presence of the issue on the particular tile seems to be totally random.
I use BrowserStack for testing, problem appears only on all iPhones (checked 8, 10, 11, 12) with Safari. Running Chrome does not produce issue.
It is not possible to expand "font-size" tree so I have no idea where that value come from, I haven't set 21px anywhere.
Do you have any ideas how can I force Safari to use given font-size? I've already tried multiple tricks like using !important, changing size based on some properties or even set different font size on click - works on all browsers but Safari.
Try this (only for iPhones)
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
and also make sure your code has the correct device meta tag
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
This is the mixin that I use for the Safari browsers
#mixin safari-only {
#supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
#content;
}
}
You can use that in your .scss file as follows:
#include safari-only() {
// your CSS
}
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
So I have an iFrame displaying a Facebook page and I am trying to enable the native 'bounce' type scrolling however can't get anything to work.
I have tried this:
iframe {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
But have had no luck so far - tested on both simulator and real iOS device.
Any ideas?
I faced the same problem when our team built epub3 reader app on iOS.
Followed EpubJS v0.3 example, we could handle the problem.
Here is an example:
<div style="width:320px;height:570px;-webkit-overflow-scrolling:touch;overflow-y:scroll;">
<iframe scrolling="no" src="..." style="width:320px;height:8071px;"></iframe>
</div>
Note: you have to calculate iFrame height and set the CSS style (ex: 8071px). Using javascript, you can use
iframe.contentDocument.body.scrollHeight
You may ask me why we have to set height style. Followed some suggestions does not help us to handle handle dynamic content problem (you can see the problem here). By setting height, we can dynamically add or remove highlight texts of users.
Hope that helps,
This would be my approach...
Step 1. Increasing the size of the iframe until the scrollbars dissappear, like this: http://davidjbradshaw.github.io/iframe-resizer/
Step 2. Use David Walsh his trick with a parent div that scrolls the iframe: https://davidwalsh.name/scroll-iframes-ios
But I think it will fail, because of the lack of authentication for cross domain iFrames.
UPDATE: What if you would enlarge the iframe based on the scroll position of the parent div? So parent div scrolls 100px and you make the iframe 100px larger... (given the fact that the iframe has infinite height and assuming its scrollbar is hidden)
I have a strange problem. The website is using a template and on IPhone it is showing a strange black vertical bar on the right side.
I installed safari and activated the user agent. When I set the agent to the ipad, I am seeing the problem, but client told me its on his IPhone.
Strangely when I look with dev tools, it seems to be outside the html. What could be causing this? I have already tried to set html and body to 100% width and overflow-x to hidden, but it did not help.
I have included a screenshot:
I have never seen anything like this before. What could it be? thanks verymuch!
ADDITION:
Here a live example:
example offline, sry
Somewhere, at some point, you have an element with some extra padding, border or margin that is blowing things out. I couldn't track it down, but an easy way to kill it off these days is with this in your style sheet (which is commonly used as part of a standard reset):
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
That seems to fix the issue, although on your next project, I recommend not setting fixed widths, but rather use width: 100% etc, as users on screens narrower than 300px will still have issues.
ok, so its a render issue on iphones and window phones. I cant replicate the issue on google chrome and samsung galaxy. Due to the below...
Put...
<section id="main-top">
<div id="bg">
inside the .container. You will have to re-assign your background. But the problem is with the nav and background and the positioning of these divs.
Your nav is full width but the container isn't, you have the section and div ending within the container but starts outside of it.
I'm trying to create a simple parallax animation with skrollr: my site is working well on Chrome/Mac but I'm seeing unusual behaviour on the ipad..
On ipad (testing on the IOS simulator),
the main body of the page doesn't skroll at all (or may scroll in the background, underneath the animated div?)
the animated background position (origami pattern) scrolls in the opposite direction (down is up) within the bounds defined in data-start / data-top-bottom
On desktop, the effect I can simulate the effect if I hack the div#hero to be position: fixed; in chrome dev tools.
The skrollr examples work as expected in the IOS simulator.
I have <div id="skrollr-body"></div> just before the closing </body> tag
Any suggestions?
You just naively added an empty #skrollr-body element. The documentation says
Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. That's the element we move in order to fake scrolling.
If that's the element we move for fake scrolling, then all your elements need to be inside of it (unless they're fixed positioned).
The only case were you don't need a #skrollr-body is when using position:fixed exlusively. In fact the skrollr website doesn't include a #skrollr-body element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.
https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers
So in other words, simply add a <div id="skrollr-body"> tag right after the opening <body> tag, and close this division by adding a </div> right before the </body> tag.
adding a div wrapper with skrollr-body id did absolutely nothing for, scroll just doesn't work on mobile