Absolute positioned element is not above other absolute positioned elements in Safari iOS

Question

I have a table with dropdowns

Dropdown and header of the table are absolute-positioned.

Dropdown has "z-index: 20" Header has "z-index: 10" "top" and "left" properties of dropdown are set in code.

here are styling of dropdown and header

.data-table-head {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 0 0 auto;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 12;
}  

 .custom-select-list {
        position: absolute;
        margin: 34px 0 0 0;
        min-width: 84px;
        font-weight: normal;
        right: 15px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(1px);
        z-index: 10000;
 }

Dropdown should be above the table header.

The issue appears only in Safari on iOS devices - dropdown is under the header. Does anyone know how to solve this problem?

Answer 1

I found out what was the problem. It was because on complicated layout with lot's of styles.

The drop down actually was rendered, but part of dropdown was invisible (seems like as it was overlapped by other div-blocks) but user still could interact with that invisible part.

The problem was that one of the outer parent div-containers has property -webkit-overflow-scrolling: touch; So while rendering Webkit in Safari hid part of dropdown. So I delete that property but left -webkit-transform: translate3d(0, 0, 0); to dropdown and everything started to work great!