Twitter Bootstrap 3 Succinctly^®
by Peter Shaw

CHAPTER 3

Gotcha's and things to watch out for

During the course of researching things for this book, I've come across a number of pain points all of which are going to cause you some grief either with the transition from V2 to V3, or even just with jumping straight in at the V3 point.

A few of these are applicable to V2 as well, but in general I'm including them here because they bit me and left me scratching my head in a lot of cases :-)

Internet Explorer Backwards Compatibility Modes

This one hurt… really hurt. For about a week and a half I was going around in circles, trying to figure out why my nicely crafted layout was not displaying as I expected in the latest version of IE11.

It turns out, that I had a malformed meta device tag.

As you may recall if you've read the BS2 book, then there's a basic template that's recommended as the starting point for all sites based on the bootstrap framework, it looks something like this:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Code snippet 8: Bootstrap html basic template

If you notice in the meta tag just inside the head element, you'll see that we have compatibility keys in there to allow the modern IE rendering engine to know what is and is not supported when trying to render things in a backward compatible way.

In BS3 none of this works correctly. Instead, the recommended way is to remove all your content type keys, leaving ONLY 'IE=EDGE' in there and no others.

The best way to get this to manifest itself, is to create a layout that works perfectly in an HTML5 standards way, include the various versions, then either force the IE debugger to adopt a specific version, or do something to the document source that will force IE to attempt to render the content in a way that it would under IE9 or older.

Over and over again, I looked at the meta tag, not realizing that was the cause of my problems, so if you get any weird rendering errors in IE11, have a look in the debugger and see just what mode IE believes it should be displaying your page in.

Internet explorer 10 device viewport

Yes folks, another IE related one (Pattern here?) this time IE10 which can't tell the difference between 'device width' and 'viewport width' the result of this is that IE10 gets its CSS media queries wrong a lot of the time (not just in bootstrap but other frameworks too), the fix is simple enough though. Add a dummy CSS rule to your site wide CSS styles that looks like this:

@-ms-viewport { width: device-width; }

That generally fixes things, except in one case.

Windows phone older than update 3, where the device will not interpret things correctly and put the page into desktop view to fix this the following CSS rules and JS code are needed:

@-webkit-viewport { width: device-width; }

@-moz-viewport { width: device-width; }

@-ms-viewport { width: device-width; }

@-o-viewport { width: device-width; }

@viewport { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/))

{

var msViewportStyle =

document.createElement('style') msViewportStyle

.appendChild(

document.createTextNode( '@-ms-viewport{width:auto!important}' ) )

document.querySelector('head').appendChild(msViewportStyle)

}

Code snippet 9: Windows phone 8 IE fix

I can't take credit for this fix however, again it's clearly detailed in the BS3 docs online.

There is also more information on the subject in the windows 8 developer guidelines.

Safari Percent Rounding

In some versions of safari the rendering engine struggles with the number of decimal places in percentage values.

These percentages are used often in the 'col-*-1' grid classes and as a result you'll see errors in the rendering of 12 column layouts when this is encountered.

There is a bug open in the BS3 bug report system, but there's little they can do to resolve it. The BS3 docs do suggest trying to add a 'pull-right' to your last column, but the best course of resolution seems to be manual tweaking of your percentage based values until a balance is found.

Android stock browser

Android 4.1 and above ship with the 'Browser app' as the default web browser. BS3 (and many others) fail to render correctly in 'Browser app' due to the large number of problems in the browsers code base, more so in the CSS engine where there are a large number of known problems.

There is a JS-based solution to patch your layouts in the BS3 docs, but by far the best resolution is for the user, using the handset to change its options to use Chrome which is by far a better and more stable browser for Android in general.

And the rest?

There are quite a few more things to be aware of, again most of these are documented on the BS3 docs and range around the patchy support for things like pinch based zooming, virtual keyboards and how different types of view port react where media queries are concerned.

In fact a quick scan of stack overflow looking at the most common issues being asked, a great many of them revolve around scrolling, resizing, zooming and general touch screen based issues that seem to stem from either things being too small, or not being sensitive enough for average finger sizes.

Many of these size issues can be resolved by downloading the BS3 source distribution and either altering the less variables and mixins available, or by customizing things using the customization tools available, it's now no longer a good idea to just download and use BS3 unless you’re only targeting desktop apps.

If you’re targeting multiple platforms and expecting full responsiveness, then you really need to be doing a lot of customization in the hooks provided by the framework authors.

Build apps 2X faster

using Syncfusion Essential Studio^® suite

1800+ high-performance UI components.
Includes popular controls such as Grid, Chart, Scheduler, and more.
24x5 unlimited support by developers.

Get Your Free Trial Now