Comments (5)
I continue testing and it fails too with on safari browser for ios7 and chrome browser on Android device (Nexus 4 with android 4.3).
And not only fails my web application, if I try to access to http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/font-awesome/ font awesome works perfectly but icon on back button is not display correctly
from jquery-mobile-icon-pack.
I am seeing this too. Would someone be able to confirm and look at that?
from jquery-mobile-icon-pack.
With iOS7, Apple started to use a pixel ratio of 2. This change includes an issue of how background sizes are processed in context with css media queries. There is a good explanation about this at http://stackoverflow.com/questions/18950334/ios7-ignoring-retina-css-media-queries-background-size
The jQuery Mobile Icon Pack makes use of sprites and background image sizes in combination with media queries. This requires to fix this ratio-background-issue in the css.
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info2, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on, .ui-icon-email , .ui-icon-page,
.ui-icon-question , .ui-icon-foursquare, .ui-icon-dollar , .ui-icon-euro,
.ui-icon-pound , .ui-icon-apple , .ui-icon-chat , .ui-icon-trash , .ui-icon-mappin , .ui-icon-direction,
.ui-icon-heart , .ui-icon-wrench , .ui-icon-play , .ui-icon-pause , .ui-icon-stop , .ui-icon-person , .ui-icon-music,
.ui-icon-wifi , .ui-icon-phone , .ui-icon-power ,
.ui-icon-lightning , .ui-icon-drink , .ui-icon-android {
-moz-background-size: 774px 54px;
-o-background-size: 774px 54px;
-webkit-background-size: 774px 54px;
background-size: 774px 54px;
}
.ui-icon:before { margin-left: 4px; }
}
I also summarized this at http://www.bar54.de/blog/2013/12/jquery-mobile-icon-pack-and-ios-7-retina-devices/
I hope this helps and I would be happy to see this fix build into the next release of the icon pack.
br
benjamin
from jquery-mobile-icon-pack.
Actually the newest version of jQuery Mobile (1.4) uses SVG icons. I've decided to drop the original icon pack icons and simply go with the font awesome icons instead.
from jquery-mobile-icon-pack.
Check out #61 to test.
from jquery-mobile-icon-pack.
Related Issues (20)
- Icon Pack for jquery mobile 1.4 doesnt work in Internet Explorer HOT 31
- Bars icon name differs from jquery mobile HOT 2
- Icons slightly displaced on Chrome v32 (JQM 1.4) HOT 1
- Icons displayed in the wrong color when using the builder HOT 1
- Icons do not work with 1.4.2 HOT 7
- many icons are offset, not centered HOT 3
- Icons are off center HOT 3
- Icon Pack Builder generated CSS/SVG doesn't work in IE HOT 1
- Icons not centered HOT 3
- Builder should build both white and black icons HOT 1
- Builder does not work if many icons are selected
- Selecting colors for primary and alternative icons HOT 1
- Error in Builder Tool
- Wrong Color in Icons Produced by the Builder Tool
- Icons are clipped
- sign in and sign out are labeled as opposite icons
- Icons not loading with JQuery mobile 1.3.2 HOT 1
- Icons not working
- JQM version ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-mobile-icon-pack.