Показать сообщение отдельно
  #5 (permalink)  
Старый 04.04.2018, 03:03
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Kenars Посмотреть сообщение
если jquery selecter отключить то onchange нормально отрабатывает без зависаний
А зачем его менять??? jquery selecter скрывает нативный select и очень плохо имитирует нативный, вставляя кучу элементов, что ухудшает производительность, ухудшает удобство использования, (не работает с клавиатуры, не удобно на ноутбуке при помощи тач-пада, и оно не работает почему-то в браузере Chrome 65 на Android)

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

Нативный select предлагает удобство использования. Например, select для iOS представляет собой “барабан”, а для Android — попап с пунктами для выбора.

Стандартный select позволяет использовать не два щелчка мышью (открыть, выбрать), а только один (открыть, потянуть, отпустить), прокрутку длинного списка не скроллом, а таким же образом — понянуть, проскроллить, отпустить. Единицы среди сотни реализаций кастомных селектов полностью повторяют механику нативных, а это очень сильно сказывается на удобстве использования т.к. большинство взаимодействий с интерфейсом у пользователя завязано на рефлексах.

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

Сообщение от Kenars Посмотреть сообщение
Подскажите пожалуйста в чем может быть причина и как лечить?
Не использовать jquery selecter, а использовать нативный select...

Один из тех самых компонентов с вашего сайта, стилизованный при помощи CSS. (и оно работает даже в браузере Chrome 65 на Android)
<label class="custom-select" data-label="Фасовка">
	<select>
		<option>0.1 кг</option>
		<option>0.5 кг</option>
		<option>1 кг</option>
	</select>
</label>

<style>
	
.custom-select {
	position: relative;
	display: inline-block;
	margin-top: 24px;
}

.custom-select:before{
	content: attr(data-label);
	font-weight: 700;
	text-align: center;
	right: 0; left: 0;
	position: absolute;
	top: -24px;
}

.custom-select select {
	background: #fff;
	color: #222;
	border: 1px solid #ccc;
	cursor: pointer;
	margin: 0;
	padding: 10px 15px;
	padding-right: 36px;
	border-radius: 3px;
	-moz-appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 13px;
}

.custom-select select:focus {
	outline: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.custom-select:after {
	position: absolute;
	top: 0; bottom: 0; right: 15px;
	width: 13px; height: 6px;
	margin: auto 0;
	background: url(https://xn--80aaokptod6b.xn--p1ai/wp-content/themes/FreeShopWooCommerceTheme/images/no-translate-detected_318-11165.jpg) no-repeat;
	background-size: 11px;
	pointer-events: none;
	content: "";
}

/* дальше только для этого примера */
body { font-family: 'Roboto Condensed', sans-serif; }
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

Последний раз редактировалось Malleys, 04.04.2018 в 03:07.
Ответить с цитированием