Почему не работает background-size в IE10?

Question

[kkoshakk]

.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 16px;
font-size: 13px;
line-height: 1.846;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #444444;
text-decoration: none;
}
.btn:active,
.btn.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-default {
color: #444444;
background-color: #ffffff;
border-color: transparent;
}
.btn-default:focus,
.btn-default.focus {
color: #444444;
background-color: #e6e6e6;
border-color: rgba(0, 0, 0, 0);
outline: 0
}
.btn-default:hover {
color: #444444;
background-color: #e6e6e6;
border-color: rgba(0, 0, 0, 0);
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #444444;
background-color: #e6e6e6;
border-color: rgba(0, 0, 0, 0);
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
color: #444444;
background-color: #d4d4d4;
border-color: rgba(0, 0, 0, 0);
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default .badge {
color: #ffffff;
background-color: #444444;
}
.btn-default {
-webkit-background-size: 200% 200%;
background-size: 200%;
background-position: 50%;
}
.btn-default:focus {
background-color: #ffffff;
}
.btn-default:hover,
.btn-default:active:hover {
background-color: #f0f0f0;
outline: 0;
}
.btn-default:active {
background-color: #e0e0e0;
background-image: -webkit-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%);
background-image: -o-radial-gradient(circle, #e0e0e0 10%, #ffffff 11%);
background-image: radial-gradient(circle, #e0e0e0 10%, #ffffff 11%);
background-repeat: no-repeat;
-webkit-background-size: 1000% 1000%;
background-size: 1000%;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.btn {
text-transform: uppercase;
border: none;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}

Answer 1

[rizmaster]

На сколько я знаю, у background-sizeдолжно быть два значения, ширина и высота, выставь припиши ещё auto, чтобы он сохранил пропорцию. Может так получится.
Background-size: 1000% auto;

Comments

[kkoshakk]

не работает(((

[rizmaster]

Тогда попробуй ещё добавить, помимо того, что есть
-ms-background-size:

[kkoshakk]

тоже пробовал, безрезультатно(

[rizmaster]

Хмм, мне теперь тоже интересно, почему не работает)

[kkoshakk]

Мне уже три как интресно

[rizmaster]

https://m.habrahabr.ru/post/234447/
Если не поможет, посмотри в этой статье есть решения проблем в более старых версиях. Возможно с 10 версией тоже чтоб какие-то проблемы с background-size.

Answer 2

[Денис Инешин]

Для начала, упростите пример и поэкспериментируйте на живом демо: https://jsfiddle.net/IonDen/9xtc8dLp/1/
Во вторых, насколько я знаю, для применения background-size в IE, у элемента должны быть четко определенные размеры в процентах или в пикселях, попробуйте.