I just checked my web app in a first-generation iPad with Safari 4.0.4. I
noticed a lot of styles were not working properly:
border-radius
opacity
image height & width (if only one property is declared in the css)
etc...
I am thinking whether to make necessary css adjustments to make my web app render properly on Safari 4.0.4. While the global usage for IE6 and 7 are quite moderate. At the moment we are fine with not showing full support for these browser versions, due to their lack of css support.
Could this same consensus apply for Safari 4.0.4?
IE7's last release was on 2007 (http://en.wikipedia.org/wiki/Internet_Explorer_7). Safari 4 was on 2010 (http://en.wikipedia.org/wiki/Safari_version_history)
If any other frontend developers faced a similar scenario. Would appreciate to hear from you.
I think iOS can be considered sufficiently deprecated at this point to ignore it. The iPhone 4 came with iOS 4 and the iPhone 3GS has had several updates available for it for so long that an incredibly small percentage of users would be expected to still use iOS 3.x. Further, since most mobile platforms push you to update as soon as a new version is released, there is even less of a chance anyone is using anything but the most recent 2 or 3 versions.
You can see a breakdown of iOS version usage here: http://david-smith.org/iosversionstats/
Also, your link goes to information about safari desktop versions. For iOS, go here: http://en.wikipedia.org/wiki/IOS_version_history
As a general rule, our company uses the 2 versions back rule, 3 for IE, unless there is a specific need for further backward compatibility per the client.
Related
I'm using the DOMParser to manipulate AJAX-loaded html content before injecting it into the DOM. caniuse state that current support is good, but doesn't go that far back - for IE with only partial support until version 10 and for iOS only full support in Mobile Safari from version 8.1. But in this post the claim is made that it will work all the way back to IE6 (no mention here about mobile browsers). So, my question is: If one uses window.DOMParser or the ActiveX version Microsoft.XMLDOM what kind of coverage will one have? Will it cover IE back to IE6 as claimed in the linked post or is that too optimistic; and roughly what proportion of mobile browser users would one exclude requiring DOMParser support - pur in another way: is the mobile platform ready for DOMParser-supported applications?
If you use something in the spirit of
try { Microsoft.XMLDOM } else {window.DOMParser}
You will be good as far back as IE 6. But three years later I hope you do not need that support anymore :)
just like the title says, my website layout appears to be fine on all other browsers at various zooms, sizes and what not, but not in Safari.
The website adheres to HTML5 and CSS3 standards according to W3Cs validators, and I cannot spot any errors myself.
Website can be found at : http://www.kehza.co.uk/Arcade
It's very basic atm, I want the layout to work on all browsers before I progress. (catch bugs early on).
Edit :-
In Safari at certain zooms, massive white space appears at the bottom of the page, also a border is massively out of place.
See images for difference thanks :)
The latest version of Safari for Windows is 5.1.7, but some of the CSS tags that you are using require Safari 7.0. One example is the box-shadow for the #wrapper element. This is why the website does not display correctly in the Windows version of Safari.
Source: http://caniuse.com/#search=webkit-box-shadow.
It is rumored that Apple has dropped development for Safari on Windows. You will probably want to decide what legacy version of Safari that the website will support. If you are planning on using features of CSS3, then you will want to test the website in a later version of the Safari browser, available on the OSX platform.
I've been doing a lot of mobile web development lately and two things have really shocked me: The number of browser-specific bugs (and shortcomings) and the complete lack of documentation on these bugs when I search online. I could avoid a lot of them simply by rejecting Android 2.1 and iOS 3 devices and that may make sense a year from now but they still represent a large enough chunk of the market that I really need to support them.
Right now I'm using http://www.caniuse.com where I can but this only tells me about missing HTML5 features not about bugs. Also, if I want to read deeper into what "partial support" means, I have to click through to the websites it links to which may or may not contain the information.
These are a few bugs and differences (maybe not bugs but something developers should be aware of) I've identified:
Android 2.1 doesn't prevent clicking on elements covered by an overlay element.
Android 2.1 doesn't always clear placeholder text immediately (sometime visibly, sometimes invisibly) counting against maxlength.
Android 2.1 HTC desn't fire touchend events if scrolling occurs.
Android 2.1 (ans sometime iOS3) may prevent all in-page network connections after application cache download finishes.
Android 2.1 supports background-size only through -webkit-background-size.
Android 2.1 and iOS 3 do not have correct styling for HTML5 elements.
On Android devices, inline-block elements will sometime exceed their specified widths and overflow to the next line: 33.33% + 33.33% + 33.33% > 100%
iOS 3 may blank out elements during translate3D or tranlateX transitions.
Android 2.2 (one device) would occasionally render the new page's 3D translated elements on top of the old page during page navigation.
Each of these bugs required a significant amount of testing, experimentation, and often-futile research. I'm sure there is a lot of collective knowledge on these device- and version-specific problems but I haven't seen it channeled into websites like we have for the desktop. Does anyone know of any sites out there that have this?
QuirksMode does have a list of many mobile browsers and what is and isn't included.
I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
I tried looking at http://slides.html5rocks.com/#slide-orientation and it's not working in Chrome 10 (dev channel), which I thought supported that entire slideshow. I also tried loading the same slide with the Nexus One, which is the phone used for images in the specification, but that didn't work either. Does any device/browser currently support deviceorientation? Would it work on laptops that have the technology?
Also, what is that slide supposed to do when orientation is working?
I am using Chrome 11.0.696.0 on a Macbook Pro, and that device orientation link works exactly how I imagine it should.
it doesn't seem to work in either Safari 5.0.3
or Firefox 3.6
it also doesn't work on my iphone 3gs
None so far, but people in the WebKit community are implementing it. Hopefully in a couple of months it will be available. Usually timeframes for new features are not set in stone.
Does this help at all: http://www.quirksmode.org/m/table.html#t50
There's a technology preview of Opera Mobile that supports device orientation and the replacement, getUserMedia() API.