javascript - para - Post-animación de texto borrosa/distorsionada basada en Webkit a través de translate3d
efectos css (17)
Este problema parece afectar a todos los navegadores basados en WebKit, incluido el iPhone.
Primero algunos antecedentes. El sitio en el que estoy trabajando utiliza una animación ''slider'' basada en JavaScript que es básicamente idéntica a esto: http://www.assistly.com/product-tour/#/easy-setup
La única diferencia es que estoy usando -webkit-transform: translate3d para ''potenciar'' la animación real. Al utilizar este método, a diferencia de un método basado en JavaScript, el texto se vuelve borroso una vez que el contenido ha sido animado. Esto es especialmente notable en el iPhone.
Algunas soluciones que vi fueron eliminar una posición relativa, lo que hice, y agregar una regla para -webkit-font-smoothing: antialiased , que también hice. Ningún cambio hizo la más mínima diferencia.
La única forma en que podía hacer que esto funcionara correctamente sin texto borroso era usar JavaScript regular para la animación y omitir el translate3d completo. Preferiría usar translate3d porque funciona mucho más rápido en dispositivos habilitados para WebKit, pero por mi vida no puedo entender por qué está afectando el texto de una manera tan pobre.
Cualquier sugerencia o solución sería muy apreciada.
@kizu Estas respuestas y sugerencias no ayudan. Para su jsfiddle necesita agregar
-webkit-perspective-origin: 50% 50%; -webkit-perspective: 1400px;
para el elemento padre del elemento que desea utilizar translate3d, de lo contrario la traducción del eje z no hace nada. En este caso, lo está aplicando al botón en el que hace clic, creo que quería aplicarlo al contenido.
Pero de todos modos, agregar esos para activar el cambio del eje z causa que el desenfoque del botón en su ejemplo.
Me encantaría encontrar una solución a esto también, me temo que no hay una.
Acabo de arreglar esto con un truco simple que no sé por qué. Aquí puedes ver lo diferente.
Originalmente, diseñé el elemento así:
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Lo que lleva al texto borroso ... Después de una prueba aleatoria, puse el estilo en el estilo de clase y obligo al procesador CSS a tomar este estilo en lugar del estilo de elemento (como estoy usando componentes React, los estilos establecidos por React se convertirán estilo del elemento)
Esto es lo que hice.
.class-name {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
Realmente quiero saber por qué mover este estilo del estilo del elemento al estilo de la clase lo arreglaría. ¿Alguna idea?
Como @Robert mencionó anteriormente, a veces agregar fondos ayuda, pero no siempre.
Entonces, para el ejemplo, Dmitry agregó que eso no es lo único que debes hacer: excepto desde el fondo, debes decirle al navegador que use explícitamente el anti-aliasing adecuado, entonces, hay un ejemplo de Dmitry fijo: http://jsfiddle.net/PtDVF/1/
Debe agregar estos estilos alrededor de (o para) los bloques donde necesita corregir el suavizado:
background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;
Espero que esto se trate de centrar el objeto en el centro exacto de la pantalla. La borrosidad ocurre con la transformación: traducir (-50%, - 50%);
así que en lugar de hacer
position: absolute;
margin:0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
Intenté inyectar estilo en un elemento usando javascript. (React.js)
const node = ReactDOM.findDOMNode(this);
var width = node.offsetWidth;
var height = node.offsetHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
style={
left : (windowWidth/2) - (this.state.width/2) + ''px'',
right: (windowWidth/2) - (this.state.width/2) + ''px'',
top: (windowHeight/2) - (this.state.height/2) + ''px'',
bottom: (windowHeight/2) - (this.state.height/2) + ''px''
}
Inyectar estilo en elemento por estilo javascript
P.ej.
export default class Dialog extends React.Component {
constructor(props) {
super(props);
this.state = {
width: ''0px'',
height: ''0px''
};
}
setWidthhandHeight(node){
if (this.state.width !== node.offsetWidth) {
this.setState({
width: node.offsetWidth,
height: node.offsetHeight
});
}
}
componentDidMount() {
this.setWidthhandHeight(node);
}
render() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
return (
<dialog className={this.props.className + " dialog"}
style={{
left : (windowWidth/2) - (this.state.width/2) + ''px'',
right: (windowWidth/2) - (this.state.width/2) + ''px'',
top: (windowHeight/2) - (this.state.height/2) + ''px'',
bottom: (windowHeight/2) - (this.state.height/2) + ''px''
}}>
{this.props.title ? (
<header><span>{this.props.title}</span></header>
)
: null
}
{this.props.children}
</dialog>
);
}
}
Esta es la mejor solución translateX(calc(-50% + 0.5px))
Ninguna de estas respuestas funcionó para mí, pero usando
display: inline-table;
Hizo el truco
Ninguno de estos parece haber funcionado para mí, pero he encontrado una solución ligeramente sucia que parecía hacer el truco:
top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);
Para una solución alternativa, intente:
-webkit-text-stroke: 0.35px
Probablemente la solución más fácil:
transform: translate(-50%, -50%) scale(2);
zoom:.5;
Scale-and-zoom se encarga de redondear los valores de píxel a números completos
Solucioné este problema añadiendo un estilo translate3d al elemento antes de que ocurra cualquier animación.
-webkit-transform: translate3d(0,0,0);
Tuve exactamente el mismo problema descrito en la publicación de Ken Avila: CSS: transformar: traducir (-50%, -50%) hace que los textos sean borrosos
El problema fue, por supuesto, que utilicé transform: translate (-50%, -50%), lo que hizo que mi contenido centrado se volviera borroso, pero solo en safari en osx.
No es solo el texto el que se vuelve borroso, sino todo el contenido, incluidas las imágenes. Leí en: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ que la "borrosidad" se debe a que el elemento se representa en un límite no entero.
También descubrí que podía evitar el uso de transformar traducción en la parte horizontal de mi centrado desde esta publicación: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed El único inconveniente fue que tuve que introducir un contenedor.
Descubrí que el uso de transform: translateY (-50%) no creaba "bluryness", tal vez porque mi elemento tiene una altura establecida y por lo tanto no termina representando en un límite no entero.
Mi solución, por lo tanto, terminó así:
.wrapper {
position: fixed;
left: 50%;
top: 50%;
}
.centered {
position: relative;
left: -50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class="wrapper">
<div class="centered">
Content
</div>
</div>
Usando el zoom me lo resolvió.
Acabo de agregar zoom: 1.04;
Usar el doctype HTML5 resolvió el problema para mí.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
Uso will-change en estos tipos de problemas, por lo general resuelve problemas de escalado o errores de redondeo, como ver una línea blanca de 1px separando elementos, por ejemplo.
will-change: transform;
Lea más aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Ver WebKit: Texto borroso con css scale + translate3d para una solución. Esto funciona muy bien, aunque tienes que modificar mucho.
Los elementos que estás traduciendo deben ser divisibles por dos con números pares.
Es importante que cualquier elemento que intentes cambiar a la mitad sea divisible por dos, tanto para el ancho como para la altura. Muy similar a las imágenes receptivas, cuando las cosas se pueden mover en un 50% sin dividir los píxeles.
Un div con un ancho de: 503px y una altura de 500px causará borrosidad, sin importar en qué dirección lo mueva o en cuánto use translateX o Y. Al usar transform, utiliza un acelerador de gráficos GPU que debería resultar muy nítido y suave bordes. También podría ser una buena idea establecer el tamaño de la caja: border-box; para garantizar que los anchos calculados incluyen relleno y bordes.
Tenga cuidado al usar anchos de porcentaje. Si es relativo al tamaño de la pantalla, cualquier otro ancho de píxel de la pantalla causará este desenfoque.