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

A brief discussion of several browser compatibility issues encountered

Several solutions for CSS record text icon alignment

Zabbix configuration DingTalk alarm function implementation code

Example code for drawing double arrows in CSS common styles

In-depth analysis of Flex layout in CSS3

Implementation of MySQL multi-version concurrency control MVCC

JavaScript adds event listeners to event delegation in batches. Detailed process

Application of Beautiful Style Sheets in XHTML+CSS Web Page Creation

A brief analysis of how to change the root password in Linux suse11 if you forget it

How to support Webdings fonts in Firefox

MySql common query command operation list

Recommend

Complete list of CentOS7 firewall operation commands

Detailed tutorial on installing phpMyAdmin on Ubuntu 18.04

CSS stacking and z-index example code

Practice of realizing Echarts chart width and height adaptation in Vue

MySQL 8.0.19 supports locking an account after entering an incorrect password three times (example)

Question about custom attributes of html tags

Can't connect to local MySQL through socket '/tmp/mysql.sock' solution

Use tomcat to set shared lib to share the same jar

Detailed description of the use of advanced configuration of Firewalld in Linux

Example of how to configure nginx to implement SSL

How to optimize MySQL performance through MySQL slow query

How to manage multiple projects on CentOS SVN server

Detailed explanation of the practical use of HTML table layout

Full process record of Nginx reverse proxy configuration

In-depth understanding of MySQL slow query log