Created
January 8, 2012 11:48
-
-
Save ahwayakchih/1578087 to your computer and use it in GitHub Desktop.
Test: Firefox slowdown on borders and floats.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| <title>Test of Firefox slowdown on borders and floats</title> | |
| <style type="text/css"> | |
| body { | |
| overflow: hidden; | |
| padding: 0 30px 0 30px; | |
| background: #444; | |
| color: #fff; | |
| font-family: arial,sans-serif; | |
| font-size: 12px; | |
| } | |
| a { | |
| padding: 0px 2px; | |
| text-decoration: none; | |
| } | |
| a:link { | |
| color: #009; | |
| } | |
| a:visited { | |
| color: #009; | |
| } | |
| a:hover { | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| background: #000; | |
| color: #fff; | |
| } | |
| a img { | |
| border: 2px solid #BBB; | |
| vertical-align: top; | |
| } | |
| a:hover img { | |
| border-color: #000; | |
| } | |
| input[type="button"] { | |
| min-width: 3em; | |
| } | |
| label { | |
| margin: 0px 1em; | |
| } | |
| div.container.floating { | |
| float: left; | |
| } | |
| table { | |
| margin: 0px auto; | |
| border-collapse: collapse; | |
| border-spacing: 0px; | |
| } | |
| table caption { | |
| text-align: center; | |
| } | |
| table th { | |
| padding: 0.5em 1em; | |
| font-weight: bold; | |
| white-space: nowrap; | |
| } | |
| table td { | |
| padding: 0.3em 0.5em; | |
| text-align: left; | |
| } | |
| table td[colspan] { | |
| text-align: center; | |
| } | |
| table.lista { | |
| border-collapse: separate; | |
| } | |
| div.container.floating table.lista caption { | |
| text-align: left; | |
| } | |
| table.lista thead th { | |
| background-color: #666; | |
| color: #fff; | |
| } | |
| table.lista thead th:first-child { | |
| -webkit-border-radius: 0.5em 0 0 0; | |
| -moz-border-radius: 0.5em 0 0 0; | |
| border-radius: 0.5em 0 0 0; | |
| } | |
| table.lista thead th:last-child { | |
| -webkit-border-radius: 0 0.5em 0 0; | |
| -moz-border-radius: 0 0.5em 0 0; | |
| border-radius: 0 0.5em 0 0; | |
| } | |
| table.lista thead th:only-child { | |
| -webkit-border-radius: 0.5em 0.5em 0 0; | |
| -moz-border-radius: 0.5em 0.5em 0 0; | |
| border-radius: 0.5em 0.5em 0 0; | |
| } | |
| table.lista td { | |
| background-color: #f0f0f0; | |
| color: #000; | |
| } | |
| table.lista tbody tr:nth-child(odd) td { | |
| background-color: #fafafa; | |
| } | |
| table.lista tfoot tr td { | |
| padding: 0.5em 1em; | |
| background-color: #ddd; | |
| color: #000; | |
| } | |
| table.lista.equalborders th, table.lista.equalborders td { | |
| border: 1px solid transparent; | |
| } | |
| table.lista.borders thead th + th { | |
| border-left: 1px dotted; | |
| border-left-color: #eee; | |
| border-left-color: rgba(255,255,255,0.3); | |
| } | |
| table.lista.borders td { | |
| border-style: solid; | |
| border-color: transparent transparent #c9c9c9 #e9e9e9; | |
| border-width: 0px 0px 1px 1px; | |
| } | |
| table.lista.borders td:first-child { | |
| border-left: 1px solid #999; | |
| } | |
| table.lista.borders td:last-child { | |
| border-right: 1px solid #999; | |
| } | |
| table.lista.borders tbody tr:first-child td { | |
| border-top: 1px solid #555; | |
| } | |
| table.lista.borders tbody tr:last-child td { | |
| border-bottom: 1px solid #555 !important; | |
| } | |
| table.lista.borders tbody tr:only-child td { | |
| border-top: 1px solid #555; | |
| border-bottom: 1px solid #555 !important; | |
| } | |
| table.lista.borders tfoot tr td { | |
| border-color: transparent #666; | |
| border-bottom: 1px solid #555; | |
| } | |
| table.lista td:nth-child(3) a:before {content:'✈ '; color:#b40b51;} | |
| table.lista td:nth-child(3) a:hover:before {content:'✈ '; color:#fff;} | |
| .hint span, .hint:hover span:hover {display:none;} | |
| .hint:hover span{display:inline;position:absolute;max-width: 250px;margin:-50px 0px 0px 25px;border: 1px solid #000;text-align:center;background:#000;color:#fff;} | |
| .hint span img {display:block;margin:0px auto;max-width:100%;} | |
| .hint:hover span{min-height:100px;padding:1em;z-index:20;} | |
| .hint:hover span{background: rgba(0,0,0,0.8);-moz-box-shadow: 1px 1px 5px 0px #000;-webkit-box-shadow: 1px 1px 5px 0px #000;box-shadow: 1px 1px 5px 0px #000;} | |
| .hint span:before{ | |
| overflow: hidden; | |
| display: inline-block; | |
| position: absolute; | |
| content: 'V'; /* Some content is required to make browser show anything */ | |
| width: 0px; | |
| height: 0px; | |
| left: 0px; | |
| top: 50px; | |
| margin-top: -0.5em; | |
| margin-left: -1em; | |
| border-color: transparent; /* color of triangle for IE oldar than 9 (it cannot draw triangle, so we hide it) */ | |
| border-color: transparent rgba(0,0,0,0.9) transparent transparent; /* color of triangle */ | |
| border-style: solid; | |
| border-width: 1em 1em 1em 0px; | |
| padding: 0px; | |
| } | |
| table.lista th.hint span, table.lista caption .hint span { | |
| max-width: 200px; | |
| min-height: 0px; | |
| margin: -0.5em 0px 0px 1em; | |
| white-space: normal; | |
| } | |
| table.lista th.hint span:before, table.lista caption .hint span:before { | |
| top: 0.5em; | |
| } | |
| </style> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| //<![CDATA[ | |
| (function($) { | |
| $(document).ready(function(){ | |
| $('table.lista') | |
| .on('recalculateColspan.test', function(){ | |
| var t = $(this), | |
| cols = $('thead tr:first-child > th', t).length; | |
| $('tfoot tr > :first-child', t).attr('colspan', cols); | |
| if (cols > 5) $('thead tr:first-child > th:nth-child('+cols+')', t).text(cols); | |
| }) | |
| .on('click', 'input.addcolumn', function(){ | |
| var t = $(this).parents('table.lista'); | |
| $('thead tr > th:first-child, tbody tr > td:first-child', t).each(function(){ | |
| $(this).clone().appendTo($(this).parent()); | |
| }); | |
| t.triggerHandler('recalculateColspan'); | |
| }) | |
| .on('click', 'input.subcolumn', function(){ | |
| var t = $(this).parents('table.lista'); | |
| $('thead tr > th:last-child, tbody tr > td:last-child', t).remove(); | |
| t.triggerHandler('recalculateColspan'); | |
| }) | |
| .on('click', 'input.borders, input.equalborders', function(){ | |
| if ($(this).is(':checked')) { | |
| $(this).parents('table.lista').addClass($(this).attr('class')); | |
| } | |
| else { | |
| $(this).parents('table.lista').removeClass($(this).attr('class')); | |
| } | |
| }) | |
| .on('click', 'input.floating', function(){ | |
| if ($(this).is(':checked')) { | |
| $(this).parents('div.container').addClass('floating'); | |
| } | |
| else { | |
| $(this).parents('div.container').removeClass('floating'); | |
| } | |
| }); | |
| $('table.lista').each(function(){ | |
| $(this).prepend('<caption><span class="hint"><input type="button" class="addcolumn" value="+"/><span>Add column</span></span><span class="hint"><input type="button" class="subcolumn" value="-"/><span>Remove column</span></span><label class="hint">Borders<input type="checkbox" class="borders"/><span>Set borders that are not lined up correctly.</span></label><label class="hint">Equal borders<input type="checkbox" class="equalborders"/><span>Set transparent borders for all cells. Use with "Borders" option, to "fix"/"line up" borders.</span></label><label class="hint">Floating parent<input type="checkbox" class="floating"/><span>Make container float to the left.</span></label></caption>'); | |
| }); | |
| }); | |
| })(jQuery); | |
| //]]> | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <table class="lista"> | |
| <thead> | |
| <tr> | |
| <th>First column</th> | |
| <th>Second column</th> | |
| <th>Third</th> | |
| <th>Fourth column header</th> | |
| <th class="hint">Fifth column<span>This column has links without hints, for :hover speed comparison</span></th> | |
| </tr> | |
| </thead> | |
| <tfoot> | |
| <tr><td colspan="10">some pager here</td></tr> | |
| </tfoot> | |
| <tbody> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two<br/>and a half</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two<br/>and a half</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two<br/>and a half</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two<br/>and a half</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| <tr> | |
| <td><a href="#" class="hint">One testing link text<span><img src="http://www.google.com/logos/2011/twain11-hp.jpg" alt=""/>Some popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Two</td> | |
| <td><a href="#" class="hint">Three<span><img src="http://www.google.com/logos/2011/lomonosov11-hp.jpg" alt=""/>Another popup text to sow up under mouse cursor.</span></a></td> | |
| <td>Fourth column text</td> | |
| <td><a href="#">Fifth column</a></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
With borg1980, we've encountered strange slowdowns on Firefox. After some time we've found out, that it is caused by borders. Later we've read about similar problem on bugzilla. It seems that floats also may be problematic for Firefox.
"Hints"/"Popups" (absolutely positioned spans) showing under mouse cursor slow down a lot on Firefox. Just add few columns, enable borders and/or float and watch Firefox crawl :(.
Chrome, Opera and even IE 9 running inside VirtualBox have no problem with this test.