I am working on a site design with a fixed top nav element with sub menus. The sub menus had a simple css transition on the ‘opacity’ property. The opacity would be set whenever a user mouses over the parent element, in this case an ‘li’.

Here is the basic structure

ul  
    li
         a
         ul.sub-menu

Example of CSS rule

.sub-menu {
    opacity: 0;
    transition: opacity .25s ease;
}

li:hover .sub-menu {  
    opacity: 1;
}

Note: I am leaving off the vendor prefixes for brevity.

I remembered that there is a strange flicker behavior that happens in Chrome, Safari and iOS. To get around the issue, one would need to turn off the back face visibility on an element, using the backface-visbility property.

I added the following rule, which solved the problem.

.sub-menu {
    opacity: 0;
    transition: opacity .25s ease;
    -webkit-backface-visibility: hidden;
}