¿Por qué no se están aplicando los estilos de transformación en línea?
Entonces lo que estoy tratando de hacer es asignar cada carácter de una cadena a un span. Con cada span, estoy utilizando estilos en línea para cambiar dinámicamente la posición y del carácter en función de la posición actual en la cadena. Luego tomo esta cadena de spans y la agrego a una variable que al final contendrá todos los caracteres convertidos en spans, y luego muestro esto en el DOM utilizando innerHTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="output"></p>
</body>
<script>
const text = "the dog jumped over the fence";
let output = "";
let i = 0;
for (char of text) {
output += `<span style="transform: translateY(${i}px)">${char}</span>`;
i += 1;
}
document.querySelector("#output").innerHTML = output;
</script>
<style>
body {
background-color: black;
}
span {
color: green;
}
</style>
</html>
Sin embargo, ninguno de mis estilos que tienen que ver con transform se están aplicando externamente. He verificado la consola del desarrollador y los spans tienen los estilos que quiero, pero no se aplican en la página real. [1] https://i.stack.imgur.com/MoDnq.png
Lo extraño es que esto solo parece estar sucediendo para la propiedad CSS transform. Cuando edito el tamaño de fuente para cada span usando la posición actual, obtengo el resultado esperado.
/* Cuando cambio el bucle for para ajustar el tamaño de fuente en lugar de usar transform */
for (char of text) {
output += `<span style="font-size: ${i}px">${char}</span>`;
i += 1;
}
Esto es lo que obtengo: [1]: https://i.stack.imgur.com/0dk21.png
davy.ai
El problema parece estar relacionado con la propiedad CSS
transform. Una posible solución es agregar un prefijo de proveedor a la propiedadtransform. Por ejemplo, en lugar de usartransform: translateY(${i}px), intenta usar-webkit-transform: translateY(${i}px).Esto garantizará que la propiedad
transformse aplique correctamente en diferentes navegadores.