Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme

Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme

Hintergrund

Das Lösen von Browserkompatibilitätsproblemen ist eine sehr lästige Angelegenheit. Es sind nicht viele fortgeschrittene Techniken erforderlich, aber es muss für Entwicklungsanforderungen gelöst werden. Vor kurzem bin ich bei dem Entwicklungsprojekt auf einige Kompatibilitätsprobleme gestoßen. Ich hoffe, die Lösungen für diese Probleme aufzuzeichnen und sie beim nächsten Mal direkt zu verwenden, wenn ich auf sie stoße. Ich hoffe auch, dass es für andere hilfreich sein wird.

Kompatibilitätsprobleme und -lösungen

1. Object-fit ist nicht mit IE11 und Edge kompatibel, einige CSS-Hacks können verwendet werden

Verwenden Sie background-size und background-position, um object-fit zu ersetzen und den Bildstil festzulegen

<img Klasse="Bild wird geladen" src="url"/>
.Bild wird geladen {
    Breite: 100 %;
    Höhe: 100%;
    Übergang: alle 1en leicht;
    Objekt-Passung: Abdeckung;
  }

Der obige Code kann wie folgt geändert werden:

<div Klasse="loadingImage"></div>
.Bild wird geladen {
    Breite: 100 %;
    Höhe: 100%;
    Hintergrundgröße: Abdeckung;
    Hintergrundposition: Mitte;
    Hintergrundbild: URL (URL);
}

Bei der Videowiedergabe kann object-fit:cover das Problem lösen, dass das Video nicht mit dem Bildschirm skaliert wird.

<video Klasse="video"></video>
.video {
  Breite: 100 %;
  Höhe: automatisch;
  Position: relativ;
  links: 50%;
  oben: 50 %;
  transformieren: übersetzen(-50 %, -50 %);
  Objekt-Passung: Abdeckung;
}

Sie können das folgende CSS verwenden, um das Video-Tag festzulegen und so das Problem zu lösen, dass Object-Fit mit IE und Edge nicht kompatibel ist.

<video Klasse="video"></video>
.video {
  Breite: 100 %;
  Höhe: automatisch;
  Position: relativ;
  links: 50%;
  oben: 50 %;
  transformieren: übersetzen(-50 %, -50 %);
  Objekt-Fit: Füllen;
}

2. Das Ereignis window.onload führt die Methode aus, nachdem das Bild und andere Ressourcen geladen wurden, erkennt jedoch nicht, ob die Videoressourcen geladen sind. Sie können den folgenden Code verwenden, um festzustellen, ob das Video geladen ist

<video id="video"></video>
let video = document.getElementById('video')
wenn (video.readyState === 4) {
    console.log('fertig!')
}

3. Nachdem der CSS-Übergang ausgeführt wurde, wird das Übergangsereignis ausgelöst, es besteht jedoch Kompatibilität. Sie können den folgenden Code verwenden, um die Kompatibilität zwischen Browsern zu lösen

Funktion checkTransitionEvent() {
  var el = document.createElement('div')
  var Übergänge = {
    'Übergang':'Übergangsende',
    'OÜbergang':'oÜbergangsende',
    'MozTransition':'Übergangsende',
    'WebkitTransition':'webkitTransitionEnd'
  }

  für (t in Übergängen) {
      wenn( el.style[t] !== undefiniert ){
          Rückgabeübergänge[t];
      }
  }
}

4. Onwheel-Event-Kompatibilität

Unterstützung() {
  let support = "onwheel" in document.createElement("div") ? "wheel" : // Moderne Browser unterstützen "wheel"
    document.onmousewheel !== undefiniert ? "mousewheel" : // Webkit und IE unterstützen zumindest "mousewheel"
    "DOMMausScroll";
  Unterstützung bei der Rückgabe
},

5. Die Attribute wheelDelta und detail des Radereignisses haben in verschiedenen Browsern unterschiedliche Werte. Sie können den folgenden Code verwenden, um sie zu normalisieren . Siehe https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers

var Radabstand = Funktion(evt){
  wenn (!evt) evt = Ereignis;
  var w=evt.wheelDelta, d=evt.detail;
  wenn (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    sonst return -d/3; // Firefox; TODO: kein /3 für OS X
  } sonst returniere mit 120; // IE/Safari/Chrome TODO: /3 für Chrome OS X
};

var Radrichtung = Funktion (evt) {
  wenn (!evt) evt = Ereignis;
  zurückgeben (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
};

6. requestAnimationFrame-Kompatibilität

let cancelAnimationFrame = window.cancelAnimationFrame 
  || window.mozAnimationFrame abbrechen 
  || Funktion(id) { Zeitüberschreitung(id) löschen };
let requestAnimationFrame = window.requestAnimationFrame 
  || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 
  || window.msRequestAnimationFrame
  || Funktion (Rückruf) { return setTimeout(Rückruf, 1000 / 60) };

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Detaillierte Untersuchung des MySQL-Verbundindex

>>:  Tutorial zu XHTML-Webseiten

Artikel empfehlen

Für die Verwendung des Docker-Befehls ist kein Sudo erforderlich

Da der Docker-Daemon an den Unix-Socket des Hosts...

Wie füge ich ein Website-Symbol hinzu?

Der erste Schritt besteht darin, eine Software zur...

Ausführliche Erläuterung der HTML-Grundlagen (Teil 2)

1. Liste Der Listen-UL- Container wird mit einer ...

Schwebendes Menü, kann einen Bildlaufeffekt nach oben und unten erzielen

Der Code kann noch weiter optimiert werden. Aus Z...

Verwenden Sie JavaScript, um Seiteneffekte zu erstellen

11. Verwenden Sie JavaScript, um Seiteneffekte zu...

Implementierung einer Login-Seite basierend auf layui

In diesem Artikelbeispiel wird der spezifische Co...

js kehrt zur vorherigen Seite zurück und aktualisiert den Code

1. Javascript kehrt zur vorherigen Seite zurück hi...

Zusammenfassung häufig verwendeter MySQL-Befehle im Linux-Betriebssystem

Hier sind einige gängige MySQL-Befehle für Sie: -...

CSS3 + Bézierkurve zum Erzielen eines skalierbaren Eingabesuchfeldeffekts

Und hier nun ohne weitere Umschweife die Renderin...

Über die „Berufskrankheit“ der Designer

Ich habe immer das Gefühl, dass Designer die sens...