Javascript Comparison of Chrome and Firefox

Comparison of Chrome and Firefox

When I first completed a project (Water_Vapor.html) in Chrome, I thought I would try it in Firefox. What a difference.

This page is just for a few screen shots - details and fixes are provided elsewhere.

These are images of the same application in different browsers on systems with different screen resolutions. The Firefox 24 screen shot actually is slightly smaller than the Chrome.

The main differences are

The disabled fields are sunken in Chrome
The disabled text is too hard to read (too light) in Firefox
The table borders are double lines in Chrome, raised in Firefox

As a result, I now use readonly instead of disabled and provide a style sheet to control all the display properties that are different by default..

Chrome 49
Firefox 24 - Too hard to read
Chrome 50 Windows 10 - small font
Edge Windows 10
IE Windows 10

The widths of the Windows 10 images were scaled to fit.

Table in Table Alignment

The following markup centers one table inside the muti-column field of another in Chrome, Firefox, and IE8 but NOT in IE 11 or Edge 25 in Windows 10!!

<table border=1 cellpadding=2 bgcolor=#f0f0f0 > <tr><th colspan=4 align=center>This text is centered - but the table is not! <table cellpadding=5 > <tr><td nowrap><fieldset> <legend><b>Temperature</b></legend> <input type="text" id="mcTemp_K_UIText" class="mcTemperature" value="233" size="5" maxlength="6" max="647.096" > K   <input type="text" id="mcTemp_C_UIText" class="mcTemperature" value="20" size="5" maxlength="6" > °C   <input type="text" id="mcTemp_F_UIText" class="mcTemperature" value="21" size="5" maxlength="6" > °F </fieldset> </table> <tr valign=top><th>Just lots of text <th>Just lots of text <th>Just lots of text <th>Just lots of text </table>

Example to try in various browsers.

This text is centered - but the table is not!

Temperature K °C °F

Just lots of text

These are screen shots - showing the difference!

Chrome 51 and Windows 10	IE 11 and Windows 10	Edge 25 and Windows 10

There is more (related) nonsense with respect to table tags - according to w3schools

All layout attributes are removed in HTML5.

If true - then almost every page I have written will no longer format correctly!!!

This is intentional vandalism of a large part of the web and theft of intellectual property by those who would be king!

In the example above, without the inner table, the fieldset expands to the width of the table row. Based on the standards (as I understand them), a simple <th> should have centered everything in that field. However, with all the browsers I have tested, IE 8 on Windows XP is the only one to correctly center the included table. Adding align=center to the <th> tag caused the included table to be centered in all the XP browsers and Chrome and Firefox on Windows 10.

The "fix" is to use the center tag (instead of the center attribute/property).

This example uses the center tag so that both
the text and table are centered in all tested browsers.

Temperature K °C °F

Just lots of text

In IE 8 with Windows XP, the word Temperature in the fieldset/legend is blue - in all other tested browsers, it is black.

Blank Line after Heading Tags

In all the browsers I have tested - except IE 11 or Edge 25 in Windows 10 - there is always a blank line after the heading I use to separate sections of a page - like this one.

Testing indicates that this is caused by the center tag I use to center the headings. I have been using the same template for over 15 years and it has worked in every browser ... until now!!!

Note: This is an html rendering problem and NOT a javascript problem.

This is yet another case where Microsoft has vandalized my pages by changing their implementation.

Integer

Javascript has 2 commands to convert a strings to numbers - Number and parseInt.

The first problem is that those commands return different values for an empty string - 0 vs NaN.

The other problem is that Firefox version 24.0 does not support number fields. As a result, when an attempt to assign NaN to a number field

Firefox 24.0 stores the string
All the other browsers that do support number fields simply clear the current value

The buttons below allow testing the current browser.

In all browsers	parseInt("") = NaN Number("") = 0
In this browser	target.value = parseInt(target.value)
	target.value = Number(target.value)
	target.value = Number(parseInt(target.value))
	target.value = Number(target.value).toFixed(0);

<input type=number id="test" value= 1>

target.value = parseInt(target.value); // this is the command that gives different results

target.value = Number(parseInt(target.value));  // one solution
target.value = Number(target.value).toFixed(0); // better solution

Both integer conversions round the number.

When a user is entering a value, the actual code I use checks for a blank field, leaves it that way, and does not compute any values that depend on that number. However, if one field is blank, and the user changes the value of another field, the blank field is treated as either a default value, as a zero, or as NaN, depending on how I want to handle it for that application.

IE8

IE8 does not support getElementsByClassName, as a result I had to write a routine to perform that function. The following works in Chrome - but fails in IE8 because it does not support the node.classList property.

if (document.getElementsByClassName === undefined) {
    document.getElementsByClassName = getElementsByClassName_forIE8;
}

function getElementsByClassName_forIE8(className){

  // all classnames are stored as lowercase
  return getMoreElementsByClassName_forIE8(className.toLowerCase(), document.body.children);
}

// This function is called recursively
function getMoreElementsByClassName_forIE8(className, nodes){

  var controls = []; // empty array

  for (var x=0; x < nodes.length; x++) {
    var y = nodes[x];
    var c = y.childElementCount; // just for test
    if (y.childElementCount > 0){
      controls = controls.concat(getMoreElementsByClassName_forIE8(className, y.children))
    }
    if (y.classList.length > 0){
      for (var i=0; i

I could not find a function to return all the nodes in a page. Therefore, the main function is called recursively, as required.

Note that document.querySelectorAll also does not work in IE 8.

IE8 does not support

The node.classList property
The event.target property
The const keyword
The string.trim() method
getters and setters
array.forEach(function(item, index){
Tvp_Phase = Object.freeze({vp_liquid:0, vp_ice:1});
Setting innerHTML fails with the select object (fix)
The node.oninput event, I added that code to node.onkeyup

When the mouse is over a select component, Chrome works with this but IE8 requires target.

I can not find a way to disable the default behavior for the Shift/Alt/Ctrl keys.

Alt toggles to the menu
Shift / mouse wheel moves thru the browser history
Ctrl / mouse wheel zooms the page

I can repurpose all of these in Chrome.

Found it

function stopPropagation(e) {
    if(e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.returnValue = false;
    }    
}

This works for Shift and Ctrl - I need to try alt again.

These are show stoppers - I can work around them one at a time - but WHY???

My apps will simply not work in IE8!!!!

Author: Robert Clemenzi

Comparison of Chrome and Firefox

Table in Table Alignment

Blank Line after Heading Tags

Integer

IE8

URL: http:// mc-computing.com / Languages / Javascript / Chrome_Firefox_Compare.html