Стиль ввода "теряется" при прокрутке, иногда - PullRequest
Новая
       159

Стиль ввода "теряется" при прокрутке, иногда

0 голосов
/ 07 августа 2020

Меня это действительно смущает ...

У меня есть виртуальное дерево (с использованием react-virtualized-tree), и некоторые входные данные "случайным образом" теряют импортированный UI Материал стиль на свитке . Когда это происходит, прокрутка назад в противоположном направлении исправляет это ...

Вот где это становится странным:

  • Я не могу воспроизвести это в режиме разработки, только в окончательная производственная сборка (я пробовал ее как на Chrome, так и на Firefox), которая минимизирована и c ... но я сомневаюсь, что это важно, потому что ...
  • Входные данные строк теряют свой Материал style (и только те) по-прежнему имеют все соответствующие классы (css просто не применяется ...)

  1. Style OK Style OK UI OK Inspector style OK

  2. Style KO on scroll, down in this case but that's not always the case

Note the div tag's blinking purple means, from my understanding, that the whole element was recreated - (which shouldn't - and doesn't in dev mode- happen) and that's when the Material styles stop working, but NOT MINE (and it comes from classes, not inline)... Normally (in dev), none of these blinking happen. For neither the div or the pseudo tags... Style KO UI KO after scrolling down

Conclusion

Unfortunately, I am kind of in a hurry so I won't be able to produce a demo for some time (final sprint to release), especially since I can "just" copy-paste Material's styles into my own stylesheets and it works. In this picture below, you can see how the style I copied, in this case, only .MuiInputBase-root .MuiInput-root .MuiInput-underline and the pseudo elements properly remain visible (the bottom border) when scrolling but the imported Material CSS doesn't (the input's, because I intentionally didn't copy it for this screenshot)... enter image description here

Furthermore, I have other row components that also rely on imported Material styles and they all work perfectly fine ! Only this input does it (and seemingly randomly as, if I filter my data to display only these row components, they will all bug, but if I have mixed data, then only certain scroll will "remove" the CSS... continuing to scroll can lead to those same components working again later down the tree etc... I DON'T GET IT! Now might be a good time to point out that the "buggy" input is "built by hand" and I just added to it some Material classes whereas the one working fine are "native" Material components (see below):

  • My sometimes buggy component

Buggy input

  • Another similarly used component that never bugs

Другой

Мое временное решение - скопировать и вставить стиль материала в мои собственные классы, и это работает, но я спрашиваю вас, сталкивались ли вы когда-нибудь с таким странным поведением: учитывая всю мою блаблу выше, что может вы думаете, что это может привести к тому, что CSS DOMElement * больше не будет применяться , несмотря на наличие требуемых классов , всегда работает нормально в режиме разработки и только "глючит" при очень специфических c условиях ... Какие действительно ошибки Я заключается в том, что ошибка компонентов без причины. ВСЕ ЕЩЕ ИМЕЮТ КЛАССЫ МАТЕРИАЛОВ .

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

Заранее спасибо

Подробности: full Chrome's Inspector styles содержимое вкладки

  • Проверенный стиль ОК (первые снимки экрана, когда компонент отображается правильно) 
element.style {
}
.tr-value-input {
  background-color: cadetblue;
}
.MuiInput-root {
  position: relative;
}
.MuiInputBase-root {
  color: rgba(0, 0, 0, 0.87);
  cursor: text;
  display: inline-flex;
  position: relative;
  font-size: 1rem;
  box-sizing: border-box;
  align-items: center;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.1876em;
  letter-spacing: 0.00938em;
}
user agent stylesheet
div {
  display: block;
}
.value-column form {
  display: flex;
  cursor: auto!important;
  background-color: antiquewhite;
}
form {
  font: 90%/180% Arial,Helvetica,sans-serif;
  max-width: 96%;
  margin: 0 auto;
}
.aq-row .value-column, .aq-row .value-column input {
  text-align: right;
}
.aq-row .MuiGrid-root.column {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  align-items: center;
  height: 100%;
}
[data-type=TR] {
  color: rgba(255,66,83,.87);
}
.row {
  display: flex;
  align-items: center;
  justify-content: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  padding-top: .5em;
  padding-bottom: .5em;
}
Style Attribute {
  box-sizing: border-box;
  direction: ltr;
  height: 805px;
  position: relative;
  width: 1920px;
  will-change: transform;
  overflow: auto;
}
body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-type=TR] .MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom: 2px solid rgba(255,66,83,.87);
}
.MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom: 2px solid rgba(0, 0, 0, 0.87);
}
.MuiInput-underline:before {
  left: 0;
  right: 0;
  bottom: 0;
  content: "\00a0";
  position: absolute;
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  pointer-events: none;
}
.MuiInput-underline:after {
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  position: absolute;
  transform: scaleX(0);
  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
  border-bottom: 2px solid #3f51b5;
  pointer-events: none;
}
  • Проверенный стиль KO (более поздние снимки экрана, когда компонент разрывается при прокрутке) 
.tr-value-input {
  background-color: cadetblue;
}
user agent stylesheet
div {
  display: block;
}
.value-column form {
  display: flex;
  cursor: auto!important;
  background-color: antiquewhite;
}
form {
  font: 90%/180% Arial,Helvetica,sans-serif;
  max-width: 96%;
  margin: 0 auto;
}
.aq-row .value-column, .aq-row .value-column input {
  text-align: right;
}
.aq-row .MuiGrid-root.column {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  align-items: center;
  height: 100%;
}
[data-type=TR] {
  color: rgba(255,66,83,.87);
}
.row {
  display: flex;
  align-items: center;
  justify-content: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  padding-top: .5em;
  padding-bottom: .5em;
}
Style Attribute {
  box-sizing: border-box;
  direction: ltr;
  height: 805px;
  position: relative;
  width: 1920px;
  will-change: transform;
  overflow: auto;
}
body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-type=TR] .MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom: 2px solid rgba(255,66,83,.87);
}
...