Basado en Webkit borrosa/texto distorsionado post-animación a través de translate3d

Este problema parece afectar a todos basado en WebKit de los navegadores, incluyendo el iPhone.

Primero un poco de fondo. El sitio en el que estoy trabajando utiliza un código JavaScript ‘slider’ animación.

Estoy usando -webkit-transform: translate3d a la «potencia» en el real de la animación. Cuando se utiliza este método, frente a un JavaScript basado en el método, el texto se vuelve borrosa, una vez que el contenido ha sido animado. Esto es especialmente notorio en el iPhone.

Un par de soluciones que vi fueron a quitar un posicionamiento relativo, lo cual hice, y para añadir una regla para -webkit-font-smoothing: antialiased, que también hice. Tampoco el cambio hecho la más mínima diferencia.

La sólo manera de que yo pueda hacer este trabajo correctamente sin texto borroso fue el uso regular de JavaScript para la animación y la derivación de la translate3d por completo. Prefiero usar translate3d porque realiza mucho más rápido en WebKit-dispositivos compatibles, pero para la vida de mí no puedo averiguar por qué se está afectando el texto en una mala manera.

Cualquier sugerencias o soluciones sería muy apreciada.

  • Echa un vistazo dropshado.ws/post/6142339613/…
  • Mismo problema aquí, el navegador hace borrosa de texto en toda la página cuando translate3d se aplica. Alguien ha encontrado una buena solución? Demostración: jsfiddle.net/DmitrySemenov/PtDVF
  • He modificado el jsfiddle para replicar el zoom problema que causa el texto borroso. jsfiddle.net/PtDVF/14 El desenfoque que se produce en ambos PC, MAC y Safari para el iPhone. No he probado android.
InformationsquelleAutor Mike | 2011-06-20

19 Kommentare

  1. 19

    Como @Robert se mencionó anteriormente, a veces añadiendo fondo de ayuda, pero no siempre.

    Así, para el ejemplo Dmitry añadió que no es la única cosa que usted debe hacer: excepto en el fondo, usted debe decirle navegador para utilizar explícitamente el buen anti-aliasing, por lo tanto, hay un fijo Dmitry ejemplo: http://jsfiddle.net/PtDVF/1/

    Usted necesita para agregar estos estilos de alrededor de (o para) los bloques donde usted necesita para solucionar el anti-aliasing:

    background: #FFF; /* Or the actual color of your background/applied image */
    -webkit-font-smoothing: subpixel-antialiased;
    • Que funciona, pero lo que si necesitaba un fondo transparente? background: transparent; llevará a borrosas tipografía de nuevo 🙁
    • Esto ha salvado mi$$! background: rgba(0,0,0,0);. Resuelto un muy desagradable no deseados, la falta de nitidez en iOS
    • Safari 11/High Sierra finales de 2017, todavía afectado, la adición de sólidos background-color (no transparent o rgba(0, 0, 0, 0)`) era la única solución útil.
    • Yo también tuve el mismo problema cuando he usado translateZ, a mí me ha funcionado cuando he usado translateX y translateY juntos y no mediante translateZ, como esta transformación: translateX(-50%) translateY(-50%); obras con fondo transparente así
  2. 22

    Ninguno de estos parece que han trabajado para mí, pero me he encontrado un poco sucio solución 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%);
    • Fugly solución para un fugly navegador, ninguno de los de arriba trabajado, pero éste lo hizo. Para mí Chrome/Webkit es el nuevo IE, necesito un estúpido solución después de la otra.
    • El uso de este truco para el eje Y sólo hizo el trabajo para mí, mientras no otras soluciones trabajado: translate(-50%, -50%) -> translate(-50%, -50.1%). Curiosamente, el aumento o la disminución de 50.1 sólo un poco no funciona bien…
    • Esto funcionó para mí, pero todo el mundo necesita experimentar un poco, en mi caso tuve que usar 50.2
    • Mira, esto siempre depende del ancho total de la pantalla! No hay solución fácil. Si el tamaño de la pantalla usted verá que el efecto de los cambios…
    • Esta no es una solución universal. Funciona cuando el 50% no, pero en algunos casos es malo, cuando el 50% le parece bien.
  3. 18

    Yo tenía el mismo problema que se describe en Ken Avila post: CSS: transform: translate(-50%, -50%) hace que los textos borrosos

    El problema era, por supuesto, que he utilizado transform: translate(-50%, -50%), lo que hizo que mi centrado en el contenido se vuelven borrosos, pero sólo en safari en osx.

    No es sólo el texto que se vuelve borrosa, pero todo el contenido, incluyendo imágenes.
    He leído en: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/
    que el «blurryness» es debido a que el elemento se representa en un no-entero límite.

    También descubrí que podía evitar el uso de transformar traducir en la parte horizontal de mi centrado a partir de este post: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css-position-absolute-fixed -El único punto negativo fue que tuve que introducir un contenedor.

    He descubierto que el uso de transformar: translateY(-50%) no crea ningún «bluryness», tal vez porque mi elemento tiene un conjunto de altura y por lo tanto no terminan de representación en un no-entero límite.

    Mi solución, por tanto, terminó así:

    CSS:

    .wrapper {
      position: fixed;
      left: 50%;
      top: 50%;
    }
    .centered {
      position: relative;
      left: -50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    HTML:

    <div class="wrapper">
      <div class="centered">
        Content
      </div>
    </div>

    • Ese primer artículo explica el problema a la perfección. En lo que respecta a la única configuración y debido a que el conjunto de la altura me las arreglé para conseguir alrededor de él con. función centerTarget(tar){ var y = Math.ceil(alquitrán.altura()/2), x = Math.ceil(alquitrán.width()/2); tar.css(‘transformar’,’translateX(‘ + x + ‘px) translateY(‘ + y + ‘px)’); }
    • Su señoría son una leyenda! Acabo de pasar las últimas horas tratando de sabe dios cuántos soluciones y ninguna funcionó hasta que este! Gracias!!!
    • Felicitaciones por pensar en agregar un contenedor. Yo no puedo pensar en ninguna desventaja y parece que funciona.
  4. 16

    He resuelto este problema mediante la adición de un translate3d estilo para el elemento antes de cualquier animación que se produce.

    -webkit-transform: translate3d(0,0,0); 
    • Esto hizo arreglar el subpixel de representación que tenía, pero también introdujo texto borroso como resultado de translate3D. Lo empuja a la GPU que hace el render de subpíxeles, pero hace borrosa. Es mejor para arreglar el problema de manera consecutiva con una solución de @neil taylor publicado
  5. 12

    Elementos que son la traducción debe ser divisible por dos, incluso con números.

    I’ts importante que cualquier elemento que usted está tratando de cambiar a lo largo por la mitad es divisible por dos para ambos es la anchura y la altura. Muy similar a la capacidad de respuesta de las imágenes, cuando las cosas se pueden mover en un 50% sin necesidad de dividir píxeles.

    Un div con un ancho de: 503px y una altura de 500px va a causar confusión, no importa la forma en que se mueve o cuando se utiliza translateX o Y. el Uso de la transformación, se utiliza la GPU aceleradora de gráficos que deberá ser el resultado es muy crujiente, bordes lisos. También podría ser una buena idea establecer box-sizing: border-box; para garantizar calculado anchos incluyen relleno y bordes.

    Tener cuidado cuando se utiliza el porcentaje de ancho. Si es relativo al tamaño de la pantalla, siempre la otra pantalla de píxeles de anchura hará que este desenfoque.

    • Me parece que el 3d traducido imágenes son borrosas, incluso si sus dimensiones son divisibles por 2. Muy borrosa.
    • Me he encontrado con imágenes, en algunos casos, si se convierten o no. Dos cosas, 1. Si la escala de la imagen hacia abajo, asegúrese de que la anchura y la altura son igualmente divisible. Es decir: 100px por 112px Imagen será borrosa si se amplía a un ancho de 99px. a medida que la altura no sea un número entero. 2: de Alta resolución de los monitores utilizando la escala de windows significa que usted tiene en cuenta que las traducciones que bien. Mantener la escala de la imagen al 100% o el 50% para estar seguro.
  6. 3

    Probablemente la solución más sencilla:

    transform: translate(-50%, -50%) scale(2); 
    zoom:.5;

    Escala-y-zoom se ocupa de redondeo de los valores de los píxeles a los números totales

  7. 0

    Espero que esto es acerca de centrar el objeto en el centro exacto de la pantalla.
    El desenfoque que sucede con la transform: translate(-50%,-50%);

    así que en lugar de hacer

    position: absolute;
    margin:0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    He intentado inyectar estilo en el elemento con 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 de javascript estilo

    Por ejemplo.

    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>
            );
        }
    }
  8. 0

    Reducir la vertical de margen(margin-top o margin-bottom) o la altura de cualquier elemento en el contenedor en el que se transforman traducir propiedad está siendo aplicado por solo 1 pixel.

  9. 0

    Neil Taylor de la solución fue la mejor, pero todavía se puede mejorar:

    transform: translateX(-50%) translateX(.5px)

    De esta manera tiene 2 ventajas:

    • Funciona en la mierda de los navegadores, como IE11 (que no es compatible con calc dentro de traducir)
    • Sólo se calcula en tiempo de análisis, no cada vez que el navegador se evalúa.
  10. -1

    @kizu
    Estas respuestas y sugerencias no ayuda. Para su jsfiddle necesita agregar

    -webkit-perspectiva-de origen: 50% 50%;
    -webkit-perspectiva: 1400px;

    al elemento padre del elemento que desea utilizar translate3d en, de lo contrario la traducción del eje z en realidad no hace nada. En este caso se están aplicando para el botón, haga clic en, creo que debe aplicarse a los contenidos.

    Pero de todos modos, la adición de esas para activar el eje z cambio hace que el desenfoque del botón en su ejemplo.

    Me gustaría encontrar una solución a esto, me temo que no hay uno.

  11. -1

    Para una solución alternativa, pruebe con:

    -webkit-text-stroke: 0.35px
    • Lo sentimos, pero no me ayudó.
  12. -1

    CSS:

    .row{
            height: 100vh;
            background-color:black;
          }
          .align-center{
            left:50%;
            top:50%;
            background-color:green;
          }
          
          .translate3d{
            transform: translate3d(-50%,-50%,0);
          }
          .translateXY{
            transform: translateX(-50%) translateY(-50%);
          }

    HTML:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
          <div class="col">
            <h1 class="text-center position-absolute align-center text-white translate3d font-weight-bold">BLURRED</h1>
          </div>
          <div class="col">
            <h1 class=" text-center position-absolute align-center text-white font-weight-bold translateXY  ">CLEAR</h1>
          </div>

    También tuve el mismo problema cuando he utilizado translateZ, que se resolvió cuando he usado translateX y translateY juntos y no translateZ , como este

    transform: translateX(-50%) translateY(-50%);

    trabaja con fondo transparente así, no sé por qué, pero funcionó para mí al menos

  13. -6

    Utilizando el doctype de HTML5 resuelto el problema, para mí.

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea