20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know
November 5, 2012
#1 Link outlines / highlights are misaligned on the Kindle Fire
#2 Semantic clearfix without using "clear: both" in another element
#3 Extremely low performance with the Picturefill polyfill
#4 'Multiple Class' CSS selector bug in Internet Explorer 6
#5 'ID + Class' CSS selector bug in Internet Explorer 6
#6 Box model problems in IE 5.x and 6
#7 FOUC (Flash of Unstyled Content) in Internet Explorer 6
#8 Making IE 5.x ignore a particular CSS Rule
#9 Flashing text when using CSS3 Keyframe Animations and translations in the Z axis
#10 Transparent PNGs in IE 6
#11 Removing outlines / highlights on links in mobile browsers
#12 Orientation change zooming bug in iOS
#13 Stack overflow / Memory problems on IE 7 when using Respond.js v1.1.1 or lower
#14 WebKit ignores the background colour / image of an element when printing the document
#15 Disable the dialogs that show up when you tap on an item for too long on mobile browsers
#16 Customising a page added to the Home Screen in iOS
#17 Custom attributes on iOS (Auto Capitalisation, Auto Correct, Auto Complete, Auto Save)
#18 Remove the dotted outline of select boxes in Firefox
#19 IE7 is not showing PNGs at all
#20 When you change the opacity values, PNG images 'break' on IE6 / IE7
#1 Link outlines / highlights are misaligned on the Kindle Fire
The Problem:
Usually, for accessibility reasons, when you click on a link using a mobile device such as the iPhone or the Kindle Fire an outline is displayed surrounding the phrase being contained by the anchor. In the Kindle Fire, however, on some occasions that outline is displayed above or below the link (and you actually need to click above or below the phrase to make the link work).
The Fix:
Apparently, the Kindle Fire doesn't play nice when a combination of the following CSS rules are present on the parent element of the link, specially in the '*' selector:
text-rendering: optimizeLegibility; position: relative; -webkit-box-sizing: border-box;
#2 Semantic clear fix without using "clear: both" in another element
Credit goes to CSS-Tricks
The Problem:
We've all been there - you use "float: left" on one element, "float: right" on another and all hell breaks loose below them. To fix it many developers use a third element that includes the CSS rule "clear: both".
The (semantically-correct) Fix:
Make sure the containing element includes the following rules (it even works on IE 6 and 7)
[element]:before,
[element]:after {
content: "";
display: table;
}
[element]:after {
clear: both;
}
[element] {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
#3 Extremely low performance with the Picturefill polyfill
The Problem:
From the picturefill.js code:
var ps = w.document.getElementsByTagName( "div" );
// Loop the pictures
for( var i = 0, il = ps.length; i < il; i++ ){
if( ps[ i ].getAttribute( "data-picture" ) !== null ){
var sources = ps[ i ].getElementsByTagName( "div" ),
matches = [];
// See if which sources match
for( var j = 0, jl = sources.length; j < jl; j++ ){
If you have 2000 divs on your page it cycles through every single one of them checking if it has the "data-picture" attribute, and if it does, it begins another loop looking for the sources. The author of the polyfill refuses to use querySelectorAll to query the elements instead.
The Fix:
Include a polyfill for querySelectorAll and replace the first lookup with the following code:
var ps = document.querySelectorAll("div[data-picture]")
// Don't forget to the remove this check as well:
if( ps[ i ].getAttribute( "data-picture" ) !== null ){
#4 'Multiple Class' CSS Selector bug in Internet Explorer 6
Credit goes to Paul Irish
The Problem:
There are many problems with IE6, but here are two particular ones (this one and the one below, #5) with CSS Selectors that drew me almost crazy. The problem occurs when you try using a selector such as:
p.disclosure.warning { text-align: center; }
In that case, IE6 will consider the last one only, adding the rule to all 'p' elements that have the class 'warning'.
The Fix:
Besides having a very low performance, try not to fall in that situation and plan your CSS + Markup accordingly.
#5 'ID + Class' CSS Selector bug in Internet Explorer 6
The Problem:
IE6 will ignore the second rule when you use:
#dialog.error { background-color: red; }
#dialog.warning { background-color: yellow; }
The Fix:
Try to avoid using that particular selector and just use .error and .warning without referencing #dialog
#6 Box model problems in Internet Explorer 5.x and 6
The Problem:
While the standard dictates that the width of an element is composed by margin + border + padding + width of the element itself, IE6, however, considers that the paddings and borders should be included with the width of the element. For example, a very common problem is that a box that has a width of 300 pixels and a border of 1 pixel and is displayed with a total width of 302 pixels of width in most browsers is displayed with 300 pixels on IE6.
The Fix:
Use the following code:
div {
margin: 0;
padding: 0;
border: 1px solid #F00;
width: 302px
}
html > body div {
width: 300px
}
#7 FOUC (Flash of Unstyled Content) in Internet Explorer 6
The Problem:
Usually when you use @import (by the way, you shouldn't!) IE will show your page without any styles for a brief moment.
The Fix:
Besides dropping the use of @import... another thing that you could try is to add a script tag or another stylesheet (that doesn't use @import, of course) above the one that does.
#8 Making IE 5.x ignore a particular CSS Rule
The Problem:
Let's assume that your page looks great on all browsers, including IE 5.x, but there are just two particular CSS rules that you want IE 5.x to avoid.
The Fix:
Using a conditional comment to make IE 5.x download an entire CSS file with just two rules seems a bit... overkill doesn't it? I agree. There's another way to do it though, by using the /**/:/**/ hack; Add it to any CSS rule to make IE 5.x ignore it.
#main {
width: 800px; // Width for all browsers
width/**/:/**/ 700px; // Width is overriden in all browsers but ignored in IE 5.x
}
#9 Flashing text when using CSS3 Keyframe Animations and translations in the Z axis
The Problem:
I came across this problem while testing Flexslider. In case you didn't know, Flexslider uses CSS3 Animations (with a fallback to jQuery's animate() function) to animate elements. However, on some occasions in Chrome and Firefox when an element is being animated you can notice that some texts blink, or rather, they use a different antialiasing algorithm as pictured below:
The Fix:
It's relatively simple to fix. Just add the following rules to the parent container of that/those text/s:
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
The Problem:
Internet Explorer 6 doesn't support transparent PNGs.
The Fix:
Add a conditional comment for IE6 and for each image using a PNG image include the following CSS rule:
#image { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/path/to/your/image.png', sizingMethod='scale'); }
Alternatively you can use a library to do that automatically for you. I particularly happen to like this one, or you can make your own.
#11 Removing outlines/highlights on links in mobile browsers
The Problem:
Like we've discussed in problem #1, mobile browsers include a visual feedback when you click on a link, as seen below:
The Fix:
Include the following CSS rule to disable that visual feedback in all elements, or change '*' to 'a' to target just links:
*:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
}
#12 Orientation change zooming bug in iOS
Credit goes to @scottjehl and @wilto.MIT
The Problem:
If you've set the meta viewport tag to have an initial-scale of 1.0, maximum-scale of 1.0 and user-scalable = no, you may have noticed that when you switch to portrait mode to landscape (or viceversa) the zooming of the page changes with no possible way to fix it.
The Fix:
Use the code below:
(function(a){function m(){d.setAttribute("content",g),h=!0}function n(){d.setAttribute("content",f),h=!1}function o(b){l=b.accelerationIncludingGravity,i=Math.abs(l.x),j=Math.abs(l.y),k=Math.abs(l.z),(!a.orientation||a.orientation===180)&&(i>7||(k>6&&j5)?h&&n():h||m()}var b=navigator.userAgent;if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&/OS [1-5]_[0-9_]* like Mac OS X/i.test(b)&&b.indexOf("AppleWebKit")>-1))return;var c=a.document;if(!c.querySelector)return;var d=c.querySelector("meta[name=viewport]"),e=d&&d.getAttribute("content"),f=e+",maximum-scale=1",g=e+",maximum-scale=10",h=!0,i,j,k,l;if(!d)return;a.addEventListener("orientationchange",m,!1),a.addEventListener("devicemotion",o,!1)})(this);
#13 Stack overflow on IE7 when using Respond.js v1.1.1 or lower
Credit goes to @tomasdev for discovering the exact line where the problem was happening
The Problem:
When happens is that when you have many images or your DOM tree is very big Respond.js makes IE7 crash, as seen below:
The Fix:
Go to line 99 and surround the following code with a setTimeout() function.
ajax( thisRequest.href, function( styles ){
translate( styles, thisRequest.href, thisRequest.media );
parsedSheets[ thisRequest.href ] = true;
makeRequests();
} );
So that it looks like this:
setTimeout(function() {
ajax( thisRequest.href, function( styles ){
translate( styles, thisRequest.href, thisRequest.media );
parsedSheets[ thisRequest.href ] = true;
makeRequests();
} );
}, 70);
If you're still having memory problems use a value bigger than 70.
#14 WebKit ignores the background colour/image of an element when printing the document
The Problem:
Sometimes when you print a site using a WebKit-based browser you'll notice that it won't print the background colour or image.
The Fix:
Add the following CSS Rule to the elements that you're interested in printing exactly as how they look.
-webkit-print-color-adjust: exact;
#15 Disable the dialogs that show up when you tap on an item for too long on mobile browsers
The Problem:
If you tap on an item for too long the following dialog will popup on mobile devices:
The Fix:
Add the following CSS Rule to disable that behavior:
-webkit-touch-callout: none; -moz-touch-callout: none; touch-callout: none;
#16 Customising a page added to the Home Screen on iOS
The Problem:
While you may already know that you can add websites to the home screen on iOS, what you may not know is that there are several tags that will allow you to customise many elements related to that action.
The Trick:
Use the following tags to customise the application icon:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
If you want to remove the "gloss" effect given to icons use apple-touch-icon-precomposed instead of apple-touch-icon
Use the following tag to customise the name of your application when you add it to the home screen:
<meta name="apple-mobile-web-app-title" content="CUSTOM SHORT NAME">
You can also try the tag below to make your web application run in full screen mode:
<meta name="apple-mobile-web-app-capable" content="yes" />
Or this one, that will allow you to customise the colour of the status bar when your application is active:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Finally, if you want to add a custom splash screen when your application is opened use the following tag:
<link rel="apple-touch-startup-image" href="/startup.png">
#17 Custom attributes on iOS (Auto Capitalisation, Auto Correct, Auto Complete, Auto Save)
The Problem:
You may or may not know that iOS supports custom attributes that allows you to enable (or disable) support for auto capitalisation, auto correct and auto save (for example, an specific query on a search form, when you type that word again it shows up as a "suggested" term)
The Trick:
Actually, it's quite easy to add. Prior to iOS 5.0, the autocapitalization attribute only supported the values "on" or "off". In iOS 5.0 it now supports "none", "sentences", "words" and "characters". To use it, just add the attribute autocapitalization="<type>" to any form tag.
autocorrect and autocomplete only supports the properties "on" or "off". Just like with autocapitalization, just add it to any form tag.
autosave doesn't take any parameters and it works similarly to the other attributes.
#18 Remove the dotted outline of select boxes in Firefox
The Problem:
You're trying to remove the dotted outline that appear in drop-down menues (select boxes) in Firefox. You've already tried an enormous amount of CSS rules and nothing seems to work.
The Trick:
To remove that outline you need to use a special CSS-selector:
select:-moz-focusring { color: transparent; }
And...that's it.
#19 IE7 is not showing PNGs at all
The Problem:
We showed before that IE6 had problems displaying PNGs with transparencies. But what happens when, in Internet Explorer 7, PNG images are not being shown at all?
The Fix:
IE6 and IE7 use DirectX to display PNG images. However, there's a bug that if you're not logged in as the administrator, PNGs won't be shown at all in IE7. Make sure to provide a reliable fallback for that specific situation.
#20 When you change the opacity values, PNG images 'break' on IE6/IE7
The Problem:
On point #19, we've discussed that IE6 and IE7 use DirectX to display PNG images. Due to a weird bug, the configuration values of DXImageTransform.Microsoft.AlphaImageLoader() images is overriden when you animate the opacity.
The Fix:
Use DD_belatedPNG to correct that problem.
That's it! Thanks for reading. Do you know any other weird bugs? Add them in the comments below!