Does Android Stock Browser support CSS3 transforms?
According to this you can: http://caniuse.com/transforms2d
Im testing on the 'Ice Cream Sandwich' OS and it doesnt seem to work.
Chrome does seem to work, but the stock browser doesn't.
Can someone point me to some documentation or give me their experiences on this? Can't find any stats on that stock browser. Thank you.
I've been using CSS3 Transforms on Android on a mobile site I'm building. You do need to use the WebKit prefix for them to work. i.e. -webkit-transform: skewX(35deg)
MDN Transform
CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid
Yes, but you need to use the webkit prefixes and take care with media queries like "max-device-width: 360px" which doesn't work in some devices with this browser.
If some rule isn't working try to change max-device-width by max-width. It worked for me sometimes.
Related
I am developing a site that is using CSS animations for a background slider. There seems to be a problem with the images loading on Galaxy S3. Is there something I can do to fix this? Do older phones not support animations?
Here is the site: capelos.gonzbergagency.com
And here is the demo it is based on: http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/
CSS capabilities are provided by the web browser, not by the phone, verify online whether your browser version supports the CSS you used.
Also, try a modern browser like Firefox for Android or Chrome for Android, if you haven't already.
I'm trying to build a website using the technique described in this article: pure CSS parallax.
This technique requires browsers to support 3D transforms (and specifically perspective/preserve 3d).
It's working on the majority of devices and browsers no problem, and where it doesn't it is easy to detect if it'll break (such as lack of transform-style: preserve-3d in IE, or lack of 3d transforms at all) and fix it accordingly.
However, one browser stands out in exceptionally f*******g me over when I try and make it compatible to any degree - Android stock browser. Versions of the browser on Android 4+ support css3d transforms but are completely incapable of rendering them properly, with the big bug being that -webkit-perspective: 1px, while technically supported has absolutely no effect in this case (transform: translateZ(xpx) elements).
As far as I see it I have two options:
Detect the Android stock browser and serve CSS accordingly
Detect perspective not to be working and serve CSS accordingly (unlikely)
I've yet to find a foolproof/futureproof, elegant way of detecting the Android browser on the back end with PHP, with the only options being hefty API's and what I consider to be lacklustre abuse of mobile detection libraries.
I have absolutely no idea how I'd go about doing no.2.
Any help appreciated
I am creating an iOS app in HTML5 / CSS / Javascript and want to show Android Photosphere's (VR JPEGs) in the browser, specifically on an iPad with iOS 6. I've looked at this excellent work, but it won't run on my iPad.
codebase:
https://github.com/kennydude/photosphere
sample:
http://kennydude.github.com/photosphere/test.html
Any solutions out there? Thanks in advance,
Greg
The code seems to require WebGL which is not supported on Mobile devices.
Just released - https://developers.google.com/panorama/web/
That should do the job. Works fine on my IOS 6 iPhone 4S.
Based on the developers guide mentioned by gdt I created a "tour" and a general photosphere viewer.
You can see and download the examples here
I have had feedback and it seems to work fine on iPads.
The loading time might be longer than they need to be because I left the photo spheres at 50MP so each is about 7-8MB
As we develop our mobile version website, I am wondering how many of the browser specific CSS3 versions are necessary. The plan is for only smaller handheld devices to be sent to the mobile version, iPad, Galaxy and other tablets will stay on the main website.
In particular I am wondering about box-shadow, border-radius and gradient css support.
I have been combing the wonderful world of google and come up with the list below, of which browser specific versions might be necessary to cover the bulk of smart phones.
-webkit- for box-shadow
-webkit- for border-radius
-webkit-, -o-, -moz- for gradient
Can anyone confirm my list? Or tell me which ones I didn't list might be necessary?
Thanks
I suggest you use css3please.com to get all the possible prefixes for most of the commonly used css3 features.
As for mobile; you will not need the IE prefixes (opera has mobile browsers etc.)
Don't forget to always specify a non-prefixed version, regardless of if its already supported by some browsers, because it will be in the future, and the prefixed versions will go ignored.
To look up more specific information about property support in different browsers you could look them up on caniuse.com
I am investigating SVG, so I was wondering if anyone knows how good SVG support is for browsers on smart-phones. I know Opera Mini/iPhone support a lot of SVG Tiny, but I cannot figure out the support for other browsers (Blackberry, Pre, Android, Nokia smart-phones). I know phones using IE as rendering engine will have no support at all.
I have tried to find latest data, but cannot find anything later than 2007. I would appreciate if anyone can link to a post that discusses SVG support on mobile browsers.
Information about this topic really is rare (but that's nothing new when we talk about SVG, unfortunately...)
There are a few test results from the Tiny Test Suite available (end of 2008):
http://www.w3.org/Graphics/SVG/1.2/Tiny/ImpReport.html
BitFlash, eSVG, Ikivo and Motorola SVG are of special interest here. Opera Mobile is not covered by this test but it uses Ikivo as far as I know.
And there is a pretty current discussion here:
http://tech.dir.groups.yahoo.com/group/svg-developers/message/63147
Until now the results of this discussion are rather poor, but maybe you can join in there...
However, considering the pain (native) SVG development causes with "desktop browsers" I would not really recommend it for mobile browsers unless you have a very specific target group (with SVG enabled devices) or other serious reasons to use SVG.
I'm sorry that I couldn't contribute more, maybe it was a little help anyway.
As for today (Jan 2013) it looks like SVG is supported in the most popular desktop and mobile browsers - on their latest versions:
IE
Firefox Chrome
Safari
Opera
iOS Safari
Opera Mini
Android Browser
Blackberry Browser
Opera Mobile
Chrome for Android
Firefox for Android
Source: caniuse.com/svg
Supported browsers:
iOS 5+
Android 3+
Source: http://caniuse.com/#feat=svg-html5
Currently some people including me work on it independently.
You may find working solution in these articles:
Android. ImageView with SVG Support.
Android ImageView and Drawable with SVG support
BlackBerry actually supports SVG animation as far as OS 6, albeit imperfectly.
The same OS 6 also supports SVG image with no problem of resizing.