2

I have a table with dropdowns enter image description here

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?

Wedmich
  • 169
  • 1
  • 9

2 Answers2

4

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!

Wedmich
  • 169
  • 1
  • 9
  • Here is description of the bug: [Why popup/dropdown elements cannot be shown above scrollable containers under iOS Safari](https://www.devexpress.com/Support/Center/Question/Details/KA18862) – Wedmich Jun 02 '16 at 16:02
0

I think you are using z-index & translate3d both on your dropdown. So, When you are using translate3d, then z-index can't be accounted for anymore.

Try below,

.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;
        z-index: 10000;
 }
vijay
  • 63
  • 1
  • 7
  • I've tried, but there is another bug in Safari - it is not render dropdowns correctly at all as in this question [http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela] – Wedmich May 06 '16 at 11:34