I am creating a website and it's using SVG images due to retina support. I had to use modernizer to swap SVG for .PNG and also use alternative .PNGs for IE8.
I now have the problem the images are not showing on my Samsung Galaxy Ace with Android version 2.3.6.
How can I get the phone to support SVG images?
Thank you kind people.
The stock android browser didn't start supporting svg until Android version 3.0, see http://caniuse.com/#feat=svg.
You can find alternative free browsers that do support SVG on android 2.3, such as Opera Mobile (disclaimer: I work at Opera).
The modernizr solution should work just fine (see guide), though you will get PNGs in the stock browser on Android 2.3.
Related
I'm seeing some significant differences in how browsers are repeating sliced border images. It's easily demonstrated on https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
MacOS 10.14.6 Safari 12.1.2
MacOS 10.14.6 Firefox 91.0.1
MacOS 10.14.6 Chrome 92.0.4515.159
So it appears that Safari on MacOS Mojave has an issue. Simple enough if that were the case. But mobile browsers on iOS are also behaving differently.
iOS 14.6 Safari
iOS 14.6 Firefox
iOS 14.6 Chrome
Does anyone have any insight into why these browsers behave differently? Does anyone have insight into how to get the un-stretched results in all browsers that MacOS Firefox and Chrome have?
Essentially, what you are seeing here is Safari behavior vs. the behavior of all other browsers, which sadly is a common frustration of many developers— Safari functioning differently and usually unexpectedly.
What you are seeing on iOS (mobile) is to be expected, because although there are different browser apps, all of them, even Chrome and Firefox are actually Safari (using the Safari browser engine, WebKit), simply reskinned with a different UI. There is only one iOS browser in actuality.
Supporting source #1: https://www.reddit.com/r/firefox/comments/9lpmkh/
As we all know Apple forces all third party browsers on iOS to use WebKit, essentially making them just re skinned versions of Safari; This puts Gecko Based Firefox and other Third party Browsers at a performance disadvantage.
Supporting source #2: https://www.quora.com/Is-Chrome-for-iOS-just-Safari-re-skinned
Google wasn't just being lazy using Safari's rendering engine. Apple requires people making browsers to use the UIWebView object. [This] means “exactly the same rendering engine”.
To be clear, this is a bug in WebKit/Safari. I have opened an official bug report to resolve this: https://bugs.webkit.org/show_bug.cgi?id=229803
This github link I encountered last time shows that border-image in safari is seems to be not solved.
https://github.com/Fyrd/caniuse/issues/2366
I'm using SVG sprite and referencing fragment identifiers in it for CSS background image. The CSS code looks like this: background: url(sprite.svg#icon-1);.
It works on Firefox/Win7, Google Chrome/Win7, IE11/Win7, IE10/Win8, Firefox/Android 4.4.2, and Google Chrome/Android 4.4.2. However, it does not work on iOS 9.3.4.
Here is a demonstration on Plunker. (And here is a shorter url for easier accesses for mobile devices: goo.gl/P9xG4E)
Is it possible to get iOS working with this method?
== Update ==On Android 4.4.2, unlike Firefox and Google Chrome, the built-in Android browser does not support the feature.
Can I Use tells us that this is not supported on Safari (Mac or iOS).
Also note that it wasn't supported on Android browser up to 4.4.4, which are still quite common, and some other browsers have limitations.
I found a polyfill which fixes WebKit browsers' this issue. And it works for me.
Please check its demonstration for implementation.
Is Phonegap capable of converting all CSS3 transitions or should we avoid some of them?
Phonegap uses a Webview to display your page.
in most devices the Webview uses webkit to render pages. So what ever works in other webkit browsers (Google chrome, for example), should work with phonegap.
read more here:
http://docs.phonegap.com/en/4.0.0/guide_hybrid_webviews_index.md.html
You should check every CSS and javascript feature you want to use on http://caniuse.com/
You should check the columns iOS Safari for iOS apps and Android Browser for android apps (not chrome for android, because it usually has better support than Android Browser and the android webview is based on the Android Browser, not on chrome)
I have a site using the Animate library which crashes in Safari and Chrome using iPad.
I found that webkit browser in iPad doesn't support some css properties include in this library, then I started by removing this one out from the libray:
-webkit-backface-visibility: ....;
But it seems that there are more to be deleted. How can I know which ones are not supported in webkit browsers?
I am having an issue with font sizes in Chrome for Android. These two sites show different font sizes although they are using the same css files and code: link1 and link2.
In all other browsers I have tested, the fonts are displayed identically (Chrome for Windows, IE, Dolphin, Opera). Only Chrome for Android is having the issue?
Does anybody know why??
Chrome for Android has a feature called Font Boosting which on a site that does not have the viewport meta tag will make text that does not read well on the current scale read well.
You can disable font-boosting on a page by setting the max-height on the element that is being boosted to > 100000px. See https://bugs.webkit.org/show_bug.cgi?id=84186#c16 for more details
This might be to do with a known Chrome for Android issue; see here:
http://support.google.com/chrome/bin/static.py?hl=en&page=known_issues.cs