Пользовательский интерфейс материала: выравнивание по нижнему краю навигации с помощью Progressive Web App (PWA) Safari на IOS - PullRequest
Новая
       85

Пользовательский интерфейс материала: выравнивание по нижнему краю навигации с помощью Progressive Web App (PWA) Safari на IOS

0 голосов
/ 27 сентября 2018

Я занимаюсь разработкой PWA и тестирую на iPhone с помощью мобильного Safari.

Обратите внимание, что я новичок в React и material-ui, поэтому, возможно, пропустил что-то очевидное;)

ПроблемаЯ сталкиваюсь с тем, что я не могу заставить компонент Bottom Navigation отображаться в самом низу страницы.

ПРИМЕЧАНИЕ. Эта проблема возникает, только когда я устанавливаю PWA с помощью параметра «Добавить на домашний экран» из Safari на iPhone и открываю его с помощью значка:

Вот снимок экрана просмотрастраница в сафари, нижняя навигация отображает нормально:

Browsing the PWA using safari

Добавить страницу на главный экран:

enter image description here

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

enter image description here

Код и стиль следующие: 

const styles = {
  root: {
    position: 'fixed',
    bottom: 0,
    width: '100%',
  },
};

class BottomNav extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <BottomNavigation
        value={value}
        onChange={this.handleChange}
        showLabels
        className={classes.root}
      >
        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      </BottomNavigation>
    );
  }
}

Оценителюбые предложения о том, как это исправить.

Дополнительное изображение для выделения проблемы:

enter image description here

-

ОБНОВЛЕНИЕ1: протестировано на iPhone 6, 7 и 8 на IOS 11.3.1

ОБНОВЛЕНИЕ 2: демонстрационная ссылка: https://material -ui-bottomnav-pwa.herokuapp.com /

ОБНОВЛЕНИЕ 3: улучшена картинка, чтобы выделить проблему.

1 Ответ

0 голосов
/ 12 октября 2018

Я немного поиграл с HTML, удалил некоторые узлы и установил определенные атрибуты стиля, просто чтобы посмотреть, как ведет себя обработанный документ.Похоже, что нижняя строка вызвана элементом <body>, но за это не отвечают ни контент, ни стиль.Итак, судя по моей 5-минутной сессии отладки, это выглядит как ошибка рендеринга, но я могу ошибаться:)

Хорошие новости: Это поправимо.Мне удалось избавиться от нижней панели, применив min-height: 100vh к контейнеру app, что в конечном итоге заставляет элемент <body> охватывать весь экран.

...