Before digging into my css code and showing all font sizes (which will take ages), I'll try to ask a general question: any idea why in Opera the font is very tiny? Chrome, Firefox, IE work fine.
Related
Our website appears fine on a Mac. However, on an iPad, the home page slider images appear very very pixelated.
I've had a look at [this article][2] and changed the JPGs to progressive, and cleared the server cache, and the iPad Safari cache, yet the issue remains.
Help appreciated.
From this answer, using background-attachment: fixed with background-size: cover causes issues on most mobile browsers. You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using #media screen and (max-device-width: 1024px){}
OR
You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO
Maybe try to convert the image to a PNG or SVG and see if this helps. If you have a graphic designer have him do this or use one of the image converters on the web. JPEGs are compressed each time they're saved and this is a lossy compression so the image will artifact giving the pixelated look you're describing. If this solves the problem then you know it was a problem with the image itself. If it still appears pixelated then this may be a problem with the Ipad instead. I would then see if you can get a developer to set up an emulator for a different Ipad device, with Genymotion or with the built in emulator that comes with Android Studio, and visit your site on the emulator and see if the problem still persists. Hopefully this helps!
Icomoon font shows up strange in latest Safari. It has unexpected 'holes' in the filled areas.
For example:
zoomed in icon
this should be filled with color as well
These icons look good in all other browsers. So, not sure where to dig with this problem.
UPDATE:
Also looks good on Sierra and Safari 10.1
Safari 10.1 icon
Thanks in advance.
PS/ My first StackOverflow question ever ^-^
Figured out - the issue was caused by incorrect source svg. It should contain no strokes, only fills, and fill-rule="nonzero" - to be correctly converted by icomoon app to a icon font.
I am using Bootstrap3 css/js files to make my html page responsive for all kinds of screens (iphone, android, tablets, ipad, desktop).
It works fine on desktop and mobile devices but it's not 100% correct on iPad/Tablet. There are 2 issues with iPad/Tablet:
1. Responsive image for Tablet/iPad is still not fit to screen
2. font size of the text is small
Is it default behavior of Bootstrap3 or am I missing something?
We are writing a Cordova/jQuery Mobile app, and coming across an issue with iOS (both 6 and 7). The problem is that CSS is sometimes in iOS is not being applied, even though it should be. The problem is both in the emulator and device itself.
For instance:
A background-color: red is displayed as white.
An element with overflow:scroll (both with and without -webkit-overflow-scrolling: touch) cannot be scrolled.
It's not an inheritance issue - the same CSS works fine in desktop FF, Chrome, Safari, IE and in Android. It also works fine using Safari remote inspection - the style won't be displayed initially, but simply un-checking and then re-checking the property in the Safari developer tools makes it work normally !
I have not be able to isolate what causes this problem, but when it happens it happens consistently. Is there a fix for this problem ?
It should work fine for iOS6. You can try using hexadecimal code for background color and add
-webkit-overflow-scrolling: touch; for smooth scrolling.
For iOS7 the bellow link may help you.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
I am using the Titanium SDK for developing a mobile application (for the iPad). On iPad1 and iPad2 everything is fine. But on the iPad3 my Svg graphics were drawn ugly. I am dealing with a lot of WebView's in different size's to show the Svg's. Some WebView's did the rendering as it should be, but in some WebView's the Svg looks like a scaled png or jpg. The Svg's were created on demand and were embedded into html. The Svg styling is done by CSS.
I've no idea why this happen...?
Help from you would be awesome!
THX Tass
Link to a screenshot
enter link description here