it-swarm.com.de

Webkit-basierter verschwommener/verzerrter Text nach Animation über translate3d

Dieses Problem betrifft offenbar alle WebKit-basierten Browser, einschließlich des iPhone. 

Zuerst etwas Hintergrund. Die Website, an der ich gerade arbeite, verwendet eine JavaScript-basierte Slider-Animation.

Ich benutze -webkit-transform: translate3d, um die eigentliche Animation zu aktivieren. Bei Verwendung dieser Methode wird der Text im Gegensatz zu einer JavaScript-basierten Methode unscharf, sobald der Inhalt animiert wurde. Das macht sich besonders auf dem iPhone bemerkbar.

Ein paar Problemumgehungen, die ich gesehen habe, waren das Entfernen einer relativen Positionierung, was ich tat, und eine Regel für -webkit-font-smoothing: antialiased hinzufügen, die ich auch tat. Keine der Änderungen machte den geringsten Unterschied.

Die nur-Methode, wie ich dies ohne verschwommenen Text richtig machen konnte, bestand darin, für die Animation normales JavaScript zu verwenden und den translate3d vollständig zu umgehen. Ich würde es vorziehen, translate3d zu verwenden, da es auf WebKit-fähigen Geräten viel schneller ist, aber ich kann nicht herausfinden, warum der Text so schlecht auf den Text wirkt.

Anregungen oder Lösungen wären sehr dankbar.

46
Mike

Wie @Robert oben erwähnt, hilft manchmal das Hinzufügen von Hintergrund, aber nicht immer.

Für das Beispiel, das Dmitry hinzugefügt hat, ist dies nicht das einzige, was Sie tun müssen: Außer im Hintergrund müssen Sie dem Browser mitteilen, dass er das richtige Anti-Aliasing explizit verwenden soll. Es gibt also ein festes Beispiel von Dmitry: http: // jsfiddle .net/PtDVF/1/

Sie müssen diese Stile um (oder für die) Blöcke hinzufügen, in denen das Anti-Aliasing behoben werden muss:

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;
19
kizu

Nichts davon schien für mich funktioniert zu haben, aber ich habe eine etwas schmutzige Lösung gefunden, die den Trick zu bieten schien:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);
20
peter waldock

Ich hatte genau das gleiche Problem, das in Ken Avilas Beitrag beschrieben wurde: CSS: transform: translate (-50%, -50%) macht Texte verschwommen

Das Problem war natürlich, dass ich transform: translate (-50%, -50%) verwendete, was dazu führte, dass mein zentrierter Inhalt unscharf wurde, aber nur bei Safari auf osx.

Nicht nur der Text wird unscharf, sondern der gesamte Inhalt einschließlich der Bilder. Ich lese weiter: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ dass die "Unschärfe" darauf zurückzuführen ist, dass das Element an einer nicht ganzzahligen Grenze gerendert wird.

Ich entdeckte auch, dass ich die Verwendung von transform translate im horizontalen Teil meiner Zentrierung aus diesem Beitrag vermeiden könnte: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via -css-position-absolute-fixed - Das einzige Minus war, dass ich einen Wrapper einführen musste.

Ich habe festgestellt, dass die Verwendung von transform: translateY (-50%) keine "Unschärfe" verursacht hat, möglicherweise weil mein Element eine festgelegte Höhe hat und somit nicht an einer nicht ganzzahligen Grenze gerendert wird.

Meine Lösung endete daher so:

.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>

17
Njaal Gjerde

Ich habe dieses Problem behoben, indem ich dem Element einen translate3d-Stil hinzufügte, bevor eine Animation auftritt.

-webkit-transform: translate3d(0,0,0); 
16
bartburkhardt

Elemente, die Sie übersetzen, müssen mit geraden Zahlen durch zwei teilbar sein.

Es ist wichtig, dass das Element, das Sie um die Hälfte verschieben möchten, durch Breite und Höhe durch zwei teilbar ist. Sehr ähnlich zu den responsiven Bildern, wenn Dinge um 50% verschoben werden können, ohne die Pixel zu teilen.

Ein div mit einer Breite von: 503px und einer Höhe von 500px führt zu Unschärfen, egal in welche Richtung Sie es verschieben oder wie viel bei der Verwendung von translateX oder Y verwendet wird Kanten. Es kann auch eine gute Idee sein, die Größe der Box festzulegen: border-box; Um zu gewährleisten, dass die berechneten Breiten Auffüllen und Ränder umfassen.

Seien Sie vorsichtig bei der Verwendung von prozentualen Breiten. Wenn dies relativ zur Bildschirmgröße ist, wird diese Unschärfe bei jeder anderen Pixelbreite des Bildschirms verursacht.

12
factorypolaris

Dies ist die beste Lösung translateX(calc(-50% + 0.5px))

4
Neil Taylor

Die wahrscheinlich einfachste Lösung:

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

Beim Skalieren und Zoomen werden die Pixelwerte auf volle Zahlen gerundet 

2

Keine dieser Antworten funktionierte für mich, aber mit

display: inline-table;

hat den Trick gemacht

1
user3251328

Ich hoffe, es geht darum, das Objekt genau auf die Mitte des Bildschirms zu zentrieren. Die Unschärfe geschieht mit der Transformation: translate (-50%, - 50%);

also stattdessen zu tun 

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

Ich habe versucht, Stil mit JavaScript in das Element zu injizieren. (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'
}

stil durch Javascript-Stil in das Element einfügen

Z.B.

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

Reduzieren Sie den vertikalen Rand (Rand-oben oder Rand-unten) oder die Höhe eines Elements im Container, auf das die Eigenschaft transform translate angewendet wird, um nur 1 Pixel.

0
TanmayD

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

Ich hatte auch das gleiche Problem, als ich translateZ verwendet habe. Es wurde gelöst, als ich translateX und translateY zusammen verwendete und nicht translateZ, so

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

arbeitet auch mit transparentem Hintergrund, nicht sicher warum, aber bei mir zumindest gearbeitet

0
Pushpender

Mit zoom wurde es für mich gelöst.

Ich habe gerade zoom: 1.04; hinzugefügt.

0
Black

In meinem Fall gefundene Lösung bestand darin, einen height-Wert des ersten untergeordneten Elements festzulegen

0
DependencyHell