Block disappears in Firefox but not Chrome or Edge

Question

I have a block in a mat-table in Angular that makes a colored square. When adjusting its height, e.g.

 display: inline-block;
    width: 10px;
    height: 97%;

it works well in Chrome and Edge. However, it disappears in Firefox. Setting the height to px makes it appear, i.e.

height: 65px;

Setting:

-moz-height:100%;

for the column class also makes it disappear in Firefox.

It seems that height must be set in Pixels for Firefox using 'height' or it disappears. Even using:

-moz-height: 50px

doesn't keep it from disappearing from Firefox if height isn't present.

A useful alternative was em - it seems that whereas % doesn't work with Firefox - em works a bit like % across all browsers. e.g. height:4em

However, the block does not extend vertically as much as it should - and it adds additional size to the row.

There are many instances of Chrome and Firefox rendering height differently, e.g. here, here, here, here, and here.

Perhaps, the most useful answer is here which explains why implementation varies across browsers.

The recommended solutions there are to ensure that parent element height has been set - as I did here:

//for the table

  .example-table {
            flex: 1 1 auto;
            overflow-y: auto;
            min-width: 100%;
            height: 100%;
    }

// for the mat-table in the table

 .mat-table {
        margin-bottom: 1rem;
        display: table;
        border-collapse: collapse;
        min-width: 100%;
        height: 100%; 
 }

And setting the box-sizing, e.g.:

-moz-box-sizing:content-box; or -moz-box-sizing:border-box;

score 0 · Answer 1 · answered Jul 03 '21 at 13:57

The problem was with Firefox. One issue was that nested divs in any of the columns / cells affected Firefox rendering differently than Chrome and Edge (which worked as predicted).
Removing all nesting where possible helped somewhat. Using the -[moz-transform][1] methods helped make things more similar across browsers (though not emulating the same behavior). This helped:

.block {
        display: inline-block;
        width: 30px;
        vertical-align: middle;
        -moz-transform: scaleY(1.2);
        -moz-transform: translateY(5px);
        height: 95%;
        margin-top: 5px;
        margin-bottom: 1px;
}

where the column is defined as:

 td.mat-column-block {
        flex-shrink: 1;
        align-self: stretch;
        vertical-align: center;
        max-width: 50px;
        min-width: 50px; 
        border-top: none;
        height: 50px;
        max-height: 50px;
        min-height: 100%;
        justify-self: stretch;
    }

Block disappears in Firefox but not Chrome or Edge

1 Answers1