While researching for this series, I’ve come across a number of potential problems, all of which are going to cause you some grief—either with the transition from v2 to v3, or even just when jumping straight in to v3.
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 expected in the latest version of IE11.
It turned out that I had a malformed meta device tag.
As you may recall from the BS2 book, 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>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta charset="utf-8" />
<title>My Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- document code goes here -->
<script src="js/jquery-2.0.2.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
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 method is to remove all your content type keys, leaving ONLY IE=EDGE, and no others.
The best way to do this is to create a layout that works perfectly in an HTML5-standard 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 earlier.
Over and over again, I looked at the meta tag, not realizing that it 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 problem. IE10 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: 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. With Windows Phone versions earlier than Update 3, the device will not interpret things correctly and put the page into desktop view. To fix this, the following CSS rules and JavaScript 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)
}”
I can’t take credit for this fix however—it’s clearly detailed in the BS3 documentation 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
At this time, Android versions 4.1 and above ship with the “Browser” app as the default web browser. BS3 (and many others) fail to render correctly in the Browser app due to the large number of problems in the browser’s code base, and more so in the CSS engine where there are a large number of known problems.
There is a JavaScript-based solution to patch your layouts in the BS3 docs, but the best resolution is for the user to use the Chrome app instead, 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, and again, most of these are documented in the BS3 docs and cover things like pinch-based zooming, virtual keyboards, and how different types of view ports react where media queries are concerned.
In fact, a quick scan of the most common issues on Stack Overflow tells us that a great many of the problems 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.
This tutorial represents a chapter from Bootstrap 3 Succinctly, a free eBook from the team at Syncfusion.
{excerpt}
Read More