A brief discussion of several browser compatibility issues encountered

background

Solving browser compatibility issues is a very annoying thing. There are not many advanced techniques involved, but it has to be solved for development needs. Recently, I have encountered some compatibility issues in the development project. I hope to record the solutions to these problems and use them directly next time I encounter them. I also hope it will be helpful to others.

Compatibility issues and solutions

1. Object-fit is not compatible with IE11 and Edge, some CSS hacks can be used

Use background-size and background-position to replace object-fit to set the image style

<img class="loadingImage" src="url"/>
.loadingImage {
    width: 100%;
    height: 100%;
    transition: all 1s ease;
    object-fit: cover;
  }

The above code can be modified as follows:

<div class="loadingImage"></div>
.loadingImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: url(url);
}

For video playback, object-fit:cover can solve the problem that the video does not scale with the screen.

<video class="video"></video>
.video {
  width: 100%;
  height: auto;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

You can use the following CSS to set the video tag to solve the problem that object-fit is incompatible with IE and Edge.

<video class="video"></video>
.video {
  width: 100%;
  height: auto;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: fill;
}

2. The window.onload event will execute the method after the image and other resources are loaded, but it will not detect whether the video resources are loaded. You can use the following code to detect whether the video is loaded

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

3. After the css transition is executed, the transitionend event will be triggered, but there is compatibility. You can use the following code to solve the compatibility between browsers

function checkTransitionEvent() {
  var el = document.createElement('div')
  var transitions = {
    'transition':'transitionend',
    'OTransition':'oTransitionEnd',
    'MozTransition':'transitionend',
    'WebkitTransition':'webkitTransitionEnd'
  }

  for(t in transitions){
      if( el.style[t] !== undefined ){
          return transitions[t];
      }
  }
}

4. onwheel event compatibility

support() {
  let support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
    document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
    "DOMMouseScroll";
  return support
},

5. The wheelDelta and detail attributes of the wheel event have different values in different browsers. You can use the following code to normalize them . Refer to https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers

var wheelDistance = function(evt){
  if (!evt) evt = event;
  var w=evt.wheelDelta, d=evt.detail;
  if (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    else return -d/3; // Firefox; TODO: do not /3 for OS X
  } else return w/120; // IE/Safari/Chrome TODO: /3 for Chrome OS X
};

var wheelDirection = function(evt){
  if (!evt) evt = event;
  return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
};

6. requestAnimationFrame compatibility

let cancelAnimationFrame = window.cancelAnimationFrame 
  || window.mozCancelAnimationFrame 
  || function(id) { clearTimeout(id) };
let requestAnimationFrame = window.requestAnimationFrame 
  || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 
  || window.msRequestAnimationFrame
  || function (callback) { return setTimeout(callback, 1000 / 60) };

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: How to implement Echats chart large screen adaptation

>>: XHTML Web Page Tutorial

Detailed explanation of Angular data binding and its implementation

A brief discussion of several browser compatibility issues encountered

Detailed explanation of Angular data binding and its implementation

Detailed explanation of MySQL 8's new feature ROLE

Windows Server 2016 Standard Key activation key serial number

How to view the execution time of SQL statements in MySQL

Detailed explanation of Linux system directories sys, tmp, usr, var!

A quick solution to the problem of PC and mobile adaptation

Implementation of the list-style-type attribute in front of CSS ordered or unordered lists

Object.entries usage you don't know in JavaScript

How to build ssh service based on golang image in docker

How to add fields and comments to a table in sql

Recommend

Summary of examples of common methods of JavaScript arrays

HTML basic summary recommendation (title)

Detailed tutorial on installing MYSQL under WINDOWS

SSM implements the mysql database account password ciphertext login function

jQuery realizes the shuttle box function

Idea deploys remote Docker and configures the file

How to use gdb to debug core files in Linux

CSS solves the misalignment problem of inline-block

Summary of some tips for bypassing nodejs code execution

Sample code for implementing multiple selection based on nested Table in ElementUI

Zen HTML Elements Friends who use zen coding can collect it

Use Nginx to build a streaming media server to realize live broadcast function

Linux file management command example analysis [permissions, create, delete, copy, move, search, etc.]

Vue's various implementation methods for modifying parent component props through child components

Example code of how CSS matches multiple classes