ngx-material-timepicker: iPhone css игнорирует «положение: исправлено»

Question

Я создал StackBlitz для воспроизведения: https://stackblitz.com/edit/angular-rdzdxx

Имеет ngx-material-timepicker со следующим css:

.timepicker-backdrop-overlay[_ngcontent-c23] {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 999;
    pointer-events: auto;
}

Только в iPhone css заблокирован внутри дочернего компонента. В Android и десктопе все работает как положено. Есть ли известное решение для этого?

Answer 1

Здесь сообщается об ошибке для этой проблемы https://bugs.webkit.org/show_bug.cgi?id=160953

Там написано,

WebKit неправильно обрезает позицию: фиксированный элемент, внутри его "позиция: относительная; переполнение: скрытый "родитель", ЕСЛИ этот родитель имеет "z-index", установленный

Это именно то, что здесь происходит.Элемент с фиксированным позиционированием с классом .timepicker-overlay находится внутри относительно позиционированного элемента .mat-tab-body-active, у которого z-индекс равен 1.

Итак, на данный момент вы можете переопределить этот стиль и установить z-Индекс для активной вкладки initial.

.mat-tab-body.mat-tab-body-active {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: initial; // set z-index to inital
    flex-grow: 1;
}

Я протестировал ее на browserstack , вот снимок экрана для того же.

Answer 2

да @dmcgrandle, похоже, проблемы с z-index. Но я нахожу один патч с кодом ниже. добавьте 'custom-tabbar' поверх панели вкладок и переопределите CSS, как показано ниже.

.custom-tabbar .mat-tab-body-active {
  overflow: visible !important;
  position: static;
}

Я не проверял iPhone, но у меня есть чек в эмуляторе. Надеюсь, что это работа для вас.

Answer 3

вид первой вкладки заполнения также в зависимости от размера экрана ссылка на оригинальный пост источник введите описание ссылки здесь Для того, чтобы заполнить страницу, страница должна заполнить окно:

styles.css

body, html{
  height: 100%;
  margin: 0;
}

Компонент приложения должен заполнить тело:

app.component.css

:host{
  box-sizing: border-box;
  display: block;
  height: 100%;
}

По умолчанию оболочки содержимого вкладок не заполняют высоту вкладки, поэтому мы исправим это:

styles.css

.mat-tab-body-wrapper{
  flex-grow: 1;
}

Нам также нужно, чтобы группа mat-tab-group заполняла высоту, родительский элемент должен также заполнять высоту, поэтому мы дадим идентификатор и оболочке, и группе вкладок.

app.component.ts

<div id="wrapper"> <!-- give it an id -->
    <div fxLayout="row" fxLayoutGap="16px" fxFill>
        <div fxFlex="20">
            <p>Fun Sidebar</p>
        </div>
        <div fxFlex="80" fxFill>
            <mat-tab-group id="tab-group"> <!-- give it an id -->
                <mat-tab label="Summary">
                    <div fxFlex style="padding: 16px;">
                        <div class="mat-display-2">Hello</div>
                        <p>Lorem ipsulem</p>
                    </div>
                </mat-tab>
                <mat-tab label="Tall content">
                    <app-tall-component></app-tall-component>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>
</div>

app.component.css

#wrapper{
  padding: 16px; 
  min-height: 100%; 
  height: 100%; 
  box-sizing: border-box;/*new*/
}
#tab-group{
  height: 100%;
}
#tab-group mat-tab-body {
  flex-grow: 1;
}