CSS transform rotate не работает в Internet Explorer 11
Я написал приложение, которое анимирует текстовые элементы (каждая буква находится внутри элемента span).
В Internet Explorer 11 наблюдаю следующий странный эффект (в Chrome все работает нормально):
Сценарий 1:
letters
.style("-webkit-transform", "rotate(-0deg) scale(.001)")
.style("-ms-transform", "rotate(-0deg) scale(.001)")
.style("-mozilla-transform", "rotate(-0deg) scale(.001)")
.style("transform", "rotate(-0deg) scale(.001)")
.transition()
.style("-webkit-transform", "rotate(-720deg) scale(1)");
.style("-ms-transform", "rotate(-720deg) scale(1)");
.style("-mozilla-transform", "rotate(-720deg) scale(1)")
.style("transform", "rotate(-720deg) scale(1)");
Мое намерение:, чтобы отображать буквы, почти невидимые (масштаб.001), и переводить их для увеличения до обычного размера при двойном повороте.
Насколько мне известно, Мой подход: - правильный путь. (Вы видите здесь версию перехода для d3.js, которая, насколько я понимаю, не имеет значения).
CSS-стиль transform сначала имеет префикс для некоторых браузеров, которые не поддерживают обычное свойство transform. После того, как эти браузеры реализуют желаемое свойство, оно может и должно вызываться обычным свойством (без префикса). По этой причине обычное свойство следует вызывать последним, чтобы обеспечить правильное поведение.
Результат:
Это отлично работает в Chrome, однако в IE 11 переход масштабирования работает, но вращения нет.
Сценарий 2:
(просто используя префиксные версии преобразования, отбрасывая обычное преобразование с голыми костями)
letters
.style("-webkit-transform", "rotate(-0deg) scale(.001)")
.style("-ms-transform", "rotate(-0deg) scale(.001)")
.style("-mozilla-transform", "rotate(-0deg) scale(.001)")
.transition()
.style("-webkit-transform", "rotate(-720deg) scale(1)");
.style("-ms-transform", "rotate(-720deg) scale(1)");
.style("-mozilla-transform", "rotate(-720deg) scale(1)");
Это неправильный подход, поскольку в IE 11 уже реализовано преобразование. Однако это дает правильный результат (для IE 11).
Сценарий 3:
Я просто открываю сайт: https://css-tricks.com/almanac/properties/t/transform/ в Internet Explorer 11 и там «обычные» преобразования CSS отображаются по желанию. Примеры встроены в Codepen.
У меня следующие вопросы:
Почему сценарий 1 не работает в IE 11? (также пробовали различные изменения без эффекта, например, просто вращение без масштабирования и т. д.)?
Сценарий 2 работает, но, похоже, это не лучший вариант, так как я должен опустить обычное свойство преобразования barebone. Правильно ли я не иду по этому пути?
В сценарии 3 обычное преобразование работает нормально, с той лишь разницей, что оно встроено в Codepen. В чем причина этого - помогает ли это нам найти решение вопроса 1 (которое должно выполняться на веб-сервере, а не в коде?
p.s. в stackoverflow я нашел этот связанный вопрос (Поворот и масштабирование не работают в IE11), но это не помогает.
Обновление 30 мая
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "https://d3js.org/d3.v5.min.js"></script>
<style>
span {display: inline-block;}
</style>
</head>
<body>
<script>
var letters1 = d3.select("body")
.selectAll("span.notWorking")
.data("Hello stackoverflow!")
.enter()
.append("span")
.attr("class", "notWorking");
//this is desirable but doesn't work in IE11:
// transform rotate doesn>'t work, but e.g. transform scale does
letters1
.style("-ms-transform", "rotate(0deg)")
.style("transform", "rotate(0deg)")
//.style("transform", "scale(0.01)")
.text(function(d){return d;})
.transition()
.style("-ms-transform", "rotate(720deg)")
.style("transform", "rotate(720deg)");
//.style("transform", "scale(1)");
var letters2 = d3.select("body")
.selectAll("span.working")
.data("Hello stackoverflow!")
.enter()
.append("span")
.attr("class", "working");
//this is not desirable (since the regular transform can't be used) but works in IE11:
letters2
.style("-ms-transform", "rotate(0deg)")
.text(function(d){return d;})
.transition()
.style("-ms-transform", "rotate(720deg)");
</script>
</body>
</html>
Любая помощь будет принята с благодарностью!
Вам следует взглянуть на shouldiprefix.com/#transforms. Прошло довольно много времени с тех пор, как эти префиксы поставщиков были необходимы для transform. Просто подсказка, если вы хотите писать меньше кода.
@MikeMcCaughan: Да, согласно документации, IE уже давно должен хорошо справляться с преобразованием. Впрочем, выше пишу, не работает :(
Вы упомянули d3.js, который обычно используется для SVG. Преобразуемые вами элементы находятся в элементе SVG? Это будет иметь большое значение ... SVG - IE11-10 Transform Rotate, похоже, не работает
@MikeMcCaughan: Нет, элементы, которые я преобразовываю, представляют собой отдельные буквы (текст) внутри элемента span. Никакого SVG.
Хорошо. Лучше всего, если вы сможете подготовить фрагмент кода, воспроизводящего проблему. Другими словами, минимальный воспроизводимый пример. Вы можете использовать Stack Snippets (значок в редакторе выглядит как <> на странице), который работает как jsfiddle.net, CodePen и т. д.
Я просто пытался воспроизвести вашу проблему. Я не мог заставить какой-либо браузер применять преобразования с одной буквой в диапазоне, как этот <span>A</span>Смотрите здесь, почему. Однако с div IE11 делал то же самое, что и Chrome. Я с @MikeMcCaughan, мне нужно увидеть воспроизводимый код.
Хорошо, спасибо за обратную связь - я постараюсь привести минимальный пример. p.s. здесь - это то, что я пытаюсь сделать, но я постараюсь выделить минимальный пример.
@mark: Я добавил полный, но минимальный пример выше, где у меня возникла проблема с IE 11. Выбранный мной код использует d3.js, но это не должно быть связано, он должен сводиться к свойству стиля поворота css transform.
@CBroe: это правда, стиль, из которого я перехожу и к которому я перехожу, является статическим. Тем не менее, я хочу изменить стиль в JavaScript / d3.js, поскольку я динамически устанавливаю продолжительность и задержку перехода на основе данных (здесь не показаны). Я знаю, как это сделать в d3.js, но не знаю, как это сделать в css.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не могу заставить ваш минималистичный пример работать ни в одном браузере. У d3 возникла проблема с интерполяцией преобразования нить. Вместо этого, если я использую .tween и выполняю интерполяцию вручную, кажется, что он работает в IE11 (я пробовал Chrome, IE11 и Edge):
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "https://d3js.org/d3.v5.min.js"></script>
<style>
span {display: inline-block;}
</style>
</head>
<body>
<script>
var letters1 = d3.select("body")
.selectAll("span.working")
.data("Hello stackoverflow!")
.enter()
.append("span")
.attr("class", "working");
letters1
.style("transform", "rotate(0deg)scale(0.01)")
.text(function(d){return d;})
.transition()
.duration(2000)
.tween("transform", function() {
var node = d3.select(this),
s = d3.interpolateNumber(0.01, 1),
r = d3.interpolateNumber(0, 720);
return function(t) {
node.style("transform", "rotate(" + r(t) + "deg)scale(" + s(t) + ")");
};
});
</script>
</body>
</html>Большой! Я только что тестировал IE 11, и он отлично работает, большое спасибо! Не думал об интерполяции, так как в моем IE 11 она работает с -ms-transform. Странно, вы не можете воспроизвести ... Я с радостью принял этот ответ.
Я видел "Internet Explorer" и мне жаль вас ...