CSS opacity working in Firefox & Internet Explorer, but not Chrome & Safari (WebKit)

Question

I have a strange issue on an asp.NET page I am developing. I set the opacity of a .NET hyperlink control using the \"CssClass\" property at design-time. The opacity takes ef

Answer 1

This is a long-standing bug in WebKit browsers like Safari, and WebKit-derived Blink browsers like Chrome and Opera. Basically, opacity does not normally work on inline display states like display: inline elements (which is the default for a tags).

The most-common way to work around this is to change the display state to something like, display: block or display: inline-block.

Working example:

Adds display: inline-block to .menuLink.

body {
    color: white;
}

.menuContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menuTable {
    table-layout: fixed;
    width: 300px;
    height: 300px;
    border-spacing: 40px;
}

.expensesCell {
    height: 300px;
    width: 300px;
    text-align: center;
    border: 5px solid white;
    background-clip: padding-box;
    border-radius: 20px;
    font-weight: bold;
    font-size: 2.5em;
    vertical-align: middle;
    overflow: hidden;
}

.menuLink {
    color: white;
    text-decoration: none;
    margin: -10em;
    padding: 10em;
    display: inline-block;
}

.expensesCell:hover {
    background-color: lightsteelblue;
    border-color: yellow;
    color: yellow;
}

.expensesCell {
    background-color: rgb(22,167,67);
}

.disabledMenuItem {
    opacity: 0.1;
    cursor: default;        
}

    

        

            

                
                    
Expenses
                
            
        
    

Alternately, another way to make it opacity work on the element would be to add positioning other than relative and static, like position: absolute or position: fixed, but this has other side-effects which are probably not ideal for your sample.