Firefox 60+ Получение неправильной ширины элемента - PullRequest
Новая
       7

Firefox 60+ Получение неправильной ширины элемента

0 голосов
/ 01 января 2019

В Firefox 64.0 (Linux x64) я отличаюсь от Chrome 69.0, Opera 55.0 и Waterfox 52.2.6 (который, как я полагаю, очень похож на Firefox 52), чтобы получить ширину элемента.

Элемент, о котором идет речь, имеет ширину 258 пикселей, и все браузеры согласны с этим, кроме Firefox.Похоже, Firefox по какой-то причине получает ширину родительского контейнера.

Я использовал .offsetWidth, но я также пытался использовать .clientWidth и .getBoundingClientRect().width, которые все возвращают одинаковые метрики.

Оператор отладки журнала: 

console.log(sampleElement,
            sampleElement.offsetWidth,
            sampleElement.clientWidth, 
            sampleElement.getBoundingClientRect().width);

FF: {element} 1024 1024 1024

(значение изменяется в зависимости от ширины родителя - см. Ниже)

Chrome: {element} 258 258 258

Опера: {element} 258 258 258

Waterfox: {element} 258 258 258

, где {element} - это элемент HTML в консоли.Интересно, что в Firefox это представление отображается с правильными значениями для всех этих свойств ширины: 

div.project-icon
  // ..
  clientWidth: 258
  // ..
  offsetWidth: 258
  // ..
  scrollWidth: 258

Дополнительная информация об элементе:

  • Он создается динамически, ивнутри горизонтально прокручиваемого гибкого бокса, относительно позиционированного контейнера.
  • Ширина, по словам Firefox, равна ширине родительского элемента плюс 16 пикселей (но у родительского элемента нет отступов / полей).

Изображение элемента в Firefox's Inspector:

Я не могу воспроизвести ошибку во фрагменте, но вот код, используемый для генерации элементачью ширину я пытаюсь получить, и код, чтобы получить ширину. 

let scrollContainer = document.querySelector('#project-scroller');
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
data.forEach((datum, index) => {
  let div = document.createElement('div');
  div.classList.add('project-icon');
  div.dataset.index = index;
  div.addEventListener('click', function() {
    debounceScrollHandler(this);
  });
  let image = document.createElement('img');
  const images = ['https://imgur.com/BkvxnV5l.png'];
  image.src = images[Math.floor(Math.random() * images.length)];
  div.appendChild(image);
  scrollContainer.appendChild(div);
});

let n = data.length;
let cur = Math.floor(n / 2);

// set to center
let sampleElement = scrollContainer.firstChild;
let sampleElementWidth = sampleElement.getBoundingClientRect().width + parseInt(getComputedStyle(sampleElement).marginLeft.slice(0, -2)) * 2;
scrollContainer.scrollLeft = Math.floor((sampleElementWidth * (n - (n % 2 - 1)) - scrollContainer.getBoundingClientRect().width) / 2);

console.log(sampleElement, sampleElement.offsetWidth, sampleElement.clientWidth, sampleElement.getBoundingClientRect().width);
#project-scroller {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  position: relative;
  
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
#project-scroller::-webkit-scrollbar {
  display: none;
}
.project-icon {
  flex: 0 0 258px;
  width: 258px;
  height: 258px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-icon:first-child {
  background-color: green;
}
.project-icon > img {
  width: 128px;
  height: 128px;
  border-radius: 0.5em;
}
.project-icon.centered > img {
  width: 256px;
  height: 256px;
}
<div id='project-scroller'></div>

Обновление (из комментариев) : Мой код работает в FF версий 59 и более ранних, но не 60 и более поздних.Имеет ли это смысл?

Обновление 2 : я понял, что если установить небольшой тайм-аут (например, 10 мс) и запустить тот же код, ширина будет правильной.Возможно ли, что есть некоторая задержка в получении ширины из свойств CSS (ширина из класса CSS)?

...