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.
Related
I am making a mobile site and I have a problem on a Samsung Galaxy s3. The thing is that my chosen font-size looks fine in Chrome, but is too small in the native Android browser.
On the other hand if I increase font size, it is too big on Chrome.
Is there any way to target Android browser, or to alter it's behavior?
visit this page from your android browser: http://whatsmyuseragent.com/
you will get the user agent of your browser and that is an attribute you can differentiate browsers by.
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.
I have a web application, not a native Android app, and the animated gif we use as a loading icon doesn't show its animation. I've browsed other sites and it seems that no animated gifs work in Safari mobile on Android, but I've been unable to find a documented confirmation that this is the case. Does anyone know why the android browser doesn't show animated gifs? Is there a workaround for this? I've seen lots of topics about showing animation in a WebView in a native app, but none for straight web apps. Do I have to create the image with css animation?
Thanks very much!
Android uses webkit which is the underlying engine from Safari, not Safari itself.
Historically it has not supported animated GIFs due to the way the graphics are composited, however they can be optionally enabled by the user under the advanced settings of the browser on some more recent devices. That probably does not make them useful to you.
For wide compatibility with various android versions you would probably be better off with a javascript or css animation (not sure if the later works all the way back through the earliest releases).
After running tests with a project I'm working on, I can say that:
gifs display beautifully on iOS devices (I'm testing on an iPhone4 running iOS6 and gifs run smoothly. I have tested on newer devices as well...it only gets better!)
gifs display pretty badly on android (I'm testing on Galaxy S3 running android 4.1). Its even better to display a flat image, the gif animation lags a lot).
Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.
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.