В Microsoft Edge липкое позиционирование не работает в сочетании с атрибутом dir "rtl" - PullRequest
Новая
       10

В Microsoft Edge липкое позиционирование не работает в сочетании с атрибутом dir "rtl"

2 голосов
/ 01 июля 2019

Я строю статический сайт, используя gatsbyJS.Я хочу иметь липкую боковую панель.position: sticky отлично работает для Chrome и Firefox, но в Microsoft Edge 17 боковая панель не отображается.Это потому, что у меня есть dir="rtl" attr в моем HTML-теге.Что мне нужно сделать, чтобы иметь липкий элемент с rtl dir по краю?

Мой компонент боковой панели вложен в компонент макета, который использует начальную загрузку для макета страницы.Я знаю о различных возможных полифиллах, и я также написал несколько js, чтобы все выглядело нормально с position: fixed.но то, что я вижу на caniuse.com и в других местах, должно поддерживаться.Поэтому мне интересно, что я делаю неправильно, или это необнаруженная ошибка.

вот мой код.

sidebar.js: 

const Sidebar ({ sidebarMenus }) => (
  <div id="sidebar" className="sidebar">
    <Menus menuList={sidebarMenus}/>
  </div>
)

sidebar.css: 

.sidebar {
  display: none;
  position: -webkit-sticky;
          position: sticky;
  top: 20%;
  z-index: 1;
  margin-right: 35px;
  max-width: 155px;
}

@media only screen and (min-width: 770px) {
  .sidebar {
    display: block;
  }
}

pageLayout.js: 

const PageLayout = (props) => (
  <div className="container">
    <div className="row">
      <div className="col col-12 col-md-9">
        {props.children}
      </div>
      <div className="col col-0 col-md-3">
        <Sidebar page={props.page}/>
      </div>
    </div>
  </div>
)

Примечание. Для макета не существует CSS, кроме классов начальной загрузки.

При загрузке страницы по краюбоковая панель просто не появляется.Это видно в DOM, и я вижу, что оно ведет себя как липкое в инструментах разработки, но оно не отображается.Он отображается только тогда, когда я изменяю мой каталог по умолчанию ltr.Любая помощь в том, что вызывает это, будет принята с благодарностью.

обновление: очевидно, это известная ошибка: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/

1 Ответ

1 голос
/ 01 июля 2019

В MS Edge есть ошибка, которая не позволяет использовать свойство sticky position, в то время как элементы html или body имеют атрибут dir="rtl".Проверьте обсуждение на https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15754013/.
Как уже упоминалось, все работает нормально, если dir="rtl" attr установлен для дочернего элемента тела.
Так что обходной путь довольно прост: просто установите dir="rtl" на любоеконтейнер div (или другой элемент), который охватывает все страницы, которые должны быть в rtl.
Надеюсь, это кому-нибудь поможет.

...