Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why does Firefox Mobile (on Android only) show the same font sizes differently despite the same classes?

Why does Firefox Mobile (on Android only) show the same font sizes differently despite the same classes?

Problem

This must be viewed in Firefox on Android to see the issue

The following code should have all the text the same size, but on Firefox Android, the middle box text shows much larger:

VIEW IN FIREFOX ANDROID: http://jsfiddle.net/90aoz69L/embedded/result/

(To view the code, it's here: http://jsfiddle.net/90aoz69L/ )

Title 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard d
Title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
Title Number Three
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'
.boxes { position: relative; margin-top: -13px; } .box { position: relative; top: 0px; left: 0px; width: 919px; margin-left: auto; margin-right: auto; margin-top: 30px; padding-top: 15px; padding-left: 30px; padding-right: 15px; padding-bottom: 15px; background-color: #f2f2f2; display: block; overflow: hidden; text-decoration: none; } .boxInfo { position: relative; top: 0px; left: 0px; width: 701px; float: left; overflow: hidden; } .boxTitle { font-family: Roboto, Arial, Helvetica; font-size: 21px; color: #ba2219; } .boxDescription { margin-top: 4px; font-family: Roboto, Arial, Helvetica; font-size: 14px !important; line-height: 21px; color: #6d6d6d; } .boxImage { position: relative; top: 0px; left: 0px; width: 203px; margin-left: 15px; float: left; }

Why is this happening?

Problem courtesy of: Don Rhummy

Solution

Found the solution:

-moz-text-size-adjust: none;

http://jsfiddle.net/90aoz69L/1/embedded/result/

It's due to a bug in how Firefox handles sizing font on mobile: https://bugzilla.mozilla.org/show_bug.cgi?id=707195

Solution courtesy of: Don Rhummy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Why does Firefox Mobile (on Android only) show the same font sizes differently despite the same classes?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×