Баг в Хроме?

89

Leonid H

26 декабря 2017, 20:24

1259

html:

<div class="wrap">
	<div class="slider"></div>
</div>

css:

.wrap {
	padding: 1rem;
}

javascript:



class Slider {
	constructor( options ) {

		let slider = document.querySelector( options.id );
		let parent = slider.parentNode;
		let width = parent.offsetWidth;
		console.log( width ); // 411px !! Почему????????
		// В хроме контейнер .wrap имеет 390 px. Почему js вычисляет 411?? откуда +21 px???
	}
}
new Slider({
		id: '.slider',
});


// Самое что интересное ))
// 1) Когда я добавляю текст и он растягивается на всю ширину контейнера :

// <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
//tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
//quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
//consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
//cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
//proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
//<div class="wrap">
	//<div class="slider"></div>
//</div>


// то всё замечательно вычисляется ( то есть 390 px );
// 2) в мобильной версии все нормально отображается )))

//что это может быть???

S

469

Sitealert

26 декабря 2017, 20:44

#1

Признаюсь честно, что мне непонятно не только почему 411px, но и почему должно быть 390px. :)

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

CP

101

Content-pro

26 декабря 2017, 20:54

#2

offsetWidth включает в себя border и padding. Попробуйте clientWidth. Еще у вас там у wrap в rem, попробуйте дать пиксельное значение.

1

Профессиональный frontend: JS, html,css, Single-Page App (/ru/forum/964386)

239

D.iK.iJ

27 декабря 2017, 12:59

#3

Написали уже выше, что из-за padding - он делает контейнер шире. Чтобы этого не происходило, в CSS есть box-sizing: border-box;

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

LH

89

Leonid H

27 декабря 2017, 16:20

#4

DiKiJ:
Написали уже выше, что из-за padding - он делает контейнер шире. Чтобы этого не происходило, в CSS есть box-sizing: border-box;

да не же ))

к тому же использую getComputedStyle и вычитаю падинги ) Все равно хром не правильно высчитывает.

CP

101

Content-pro

27 декабря 2017, 16:44

#5

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

239

D.iK.iJ

27 декабря 2017, 20:37

#6

Leonid H:
да не же ))
к тому же использую getComputedStyle и вычитаю падинги ) Все равно хром не правильно высчитывает.

Простите, я не знаю ЧТО вы там считаете, но у меня показывает 390, когда ширина 390 :)

А у вас 424.

https://jsfiddle.net/6zvsmh2g/2/

alert(document.getElementById("slider").offsetWidth);

---------- Добавлено 28.12.2017 в 02:38 ----------

Да, если в CSS добавить box-sizing: border-box; - у вас будет считать верно, а у меня - ошибаться.

Facebook в два раза Яндекс наращивает долю в Google Maps начал показывать

CP

101

Content-pro

27 декабря 2017, 21:43

#7

https://jsfiddle.net/aLgowj1m/

padding: 1rem - это 24 + 24 = 48px

border: 1px solid red - 1 + 1 = 2px

let parent = slider.parentNode;

let width = parent.offsetWidth;

alert( width );

Показывает 48 + 2 + 390 = 440

ТС посмотри указан ли у тебя размер шрифта в корневом html. rem относительно размера шрифта корневого элемента высчитывается.

1

Соответствие размеров шрифтов задаваемых Динамическая ширина div Как сделать активную ссылку

S

469

Sitealert

27 декабря 2017, 22:13

#8

Leonid H, судя по всему, у Вас установлен базовый font-size 65%, потому и получается 411px.

LH

89

Leonid H

28 декабря 2017, 11:24

#9

Это странно, но когда я убрал назначение ширины с контейнера .slider или назначил ее как '100%' - всё начало правильно отображаться. А если вернуть фиксированное значение, то почему - то идет сдвиг.

p.s

box-sizing: border-box; стоял - не в нём дело

Проблема с вёрсткой таблицы Подскажите по верстке. Три Растянуть href на весь

CP

101

Content-pro

28 декабря 2017, 16:49

#10

Ничего странного нет, вы просто подробней изучите css: проценты, em, rem и т.д. Станет понятней что происходит.

Маркетинг для шоколадной фабрики. На 34% выше средний чек

Яндекс Вебмастер вынес товарные фиды в отдельный раздел