css - 最新的 Chrome 是否使不透明度触发器绘制？

Question

有人知道最新的 chrome 是否会使不透明度过渡触发油漆吗？我昨天在使用滑块插件时才意识到这一点，我之前测试过它，它不会导致绘制，因为它使用 transform: translateZ 将元素提升到新层。但现在似乎它触发了绘画。我知道处理不透明度的浮点黑客，像这样：“不透明度：0.99999”但我也读过它会导致性能问题。有没有人可以给我一些解决方案。欣赏它。这是我的代码：

window.app = window.app || {};

app.slider = function (setting) {
	'use strict';
	
	var idWrapper = document.getElementById(setting.wrapperID),
		idSlider = document.getElementById(setting.sliderID),
		sliderChilds = idSlider.children,
		totalChilds = sliderChilds.length,
		index = 0,
		start,
		_play,
		_stop;
	
	if (!!setting.autoPlay) {
		var autoPlay = true;
		var delay = setting.delay || 5000;
		
		_play = function () {
			start = setInterval(_next, delay);
		}

		_stop = function () {
			clearInterval(start);
		}
	}
	
	if (!!setting.pagingID) {
		var idPaging = document.getElementById(setting.pagingID),
			pagingChilds = idPaging.children;
	}

	if (!!setting.navButton) {
		var buttonNext = function() {
			var divNext = document.createElement('div');
			divNext.classList.add('nav-slider');
			divNext.classList.add('next');
			idWrapper.appendChild(divNext);
			divNext.addEventListener('click', _next, false);
			if (!!setting.autoPlay) {
				divNext.addEventListener('mouseenter', _stop, false);
				divNext.addEventListener('mouseleave', _play, false);
			}
		};

		var buttonPrev = function() {
			var divPrev = document.createElement('div');
			divPrev.classList.add('nav-slider');
			divPrev.classList.add('prev');
			idWrapper.appendChild(divPrev);
			divPrev.addEventListener('click', _prev, false);
			if (!!setting.autoPlay) {
				divPrev.addEventListener('mouseenter', _stop, false);
				divPrev.addEventListener('mouseleave', _play, false);
			}
		};
	}

	function _changeSlide(index1, index2) {
		requestAnimationFrame(function () {
			sliderChilds[index1].classList.remove('active');
			sliderChilds[index2].classList.add('active');
			if (!!setting.pagingID) {
				pagingChilds[index1].classList.remove('active');
				pagingChilds[index2].classList.add('active');
			}
			if (!!setting.external) {
				setting.external();
			}
		});
	}

	function _next() {
		if (index < totalChilds - 1) {
			_changeSlide(index, index + 1);
			index++;
		} else {
			_changeSlide(index, 0);
			index = 0;
		}
	}

	function _prev() {
		if (index > 0) {
			_changeSlide(index, index - 1);
			index--;
		} else {
			_changeSlide(index, totalChilds - 1);
			index = totalChilds - 1;
		}
	}
	
	function _setSlider() {
		idWrapper.classList.add('slider-wrapper');
		sliderChilds[0].classList.add('active');
		if (!!setting.autoPlay) {
			_play();
		}
		if (!!setting.navButton) {
			buttonNext();
			buttonPrev();
		}
		if (!!setting.pagingID) {
			pagingChilds[0].classList.add('active');
			for (var i = 0; i < totalChilds; i++) {
				(function (indexPaging) {
					if (!!setting.autoPlay) {
						pagingChilds[indexPaging].addEventListener('mouseenter', _stop, false);
						pagingChilds[indexPaging].addEventListener('mouseleave', _play, false);
					}
					pagingChilds[indexPaging].addEventListener('click', function () {
						if (indexPaging !== index) {
							_changeSlide(index, indexPaging);
							index = indexPaging;
						}
					}, false);
				})(i);
			}
		}
	}

	_setSlider();

	if (!!setting.autoPlay) {
		var publicAPI = {};

		publicAPI.play = _play;
		publicAPI.stop = _stop;
		
		return publicAPI;
	} else {
		return 'no autoplay';
	}
};

 window.onload = function () {
			'use strict';
			
			// Create all sliders needed
			app.slider1 = app.slider({
				wrapperID	: 'slider-wrapper-1',
				sliderID	: 'slider1',
				pagingID	: 'paging-slider1',
				autoPlay	: true,
				navButton	: true
			});
		};

* {
  box-sizing: border-box;
}
html, body {
  margin: 0px;
  padding: 0px;
}
img {
  max-width: 100%;
  vertical-align: top;
}
.wrapper {
  padding: 20px;
  font-size: 0px;
}


/* SLIDER CSS */
.slider-wrapper {
  position: relative;
  width: 100%;
  margin: auto;
}
.slider-content {
  position: relative;
  width: 100%;
  margin: auto;
  padding-bottom: 50%;
}
.slider-item {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  transform: translateZ(0);
  transition: all 500ms ease-in-out;
}
.slider-item.active {
  z-index: 1;
  opacity: 1;
}
.slider-paging {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  left: 0px;
  width: 100%;
  text-align: center;
        transform: translateZ(0);
}
.paging-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0px 5px;
  background-color: red;
  border-radius: 100%;
  cursor: pointer;
}
.paging-item.active {
  background-color: black;
}
.nav-slider {
        position: absolute;
        z-index: 1;
        top: 50%;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        font-size: 0;
        opacity: .5;
        background-color: black;
        transform: translateZ(0);
        transition: opacity 200ms ease-in-out 0ms;
        cursor: pointer;
    }
    .nav-slider:hover {
        opacity: .75;
    }
    .prev:before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        right: 16px;
        width: 20px;
        height: 3px;
        margin-top: -7px;
        background-color: #fff;
        transform: rotateZ(-45deg);
    }
    .prev:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        right: 16px;
        width: 20px;
        height: 3px;
        margin-top: 5px;
        background-color: #fff;
        transform: rotateZ(45deg);
    }
    .next:before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 16px;
        width: 20px;
        height: 3px;
        margin-top: -7px;
        background-color: #fff;
        transform: rotateZ(45deg);
    }
    .next:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 16px;
        width: 20px;
        height: 3px;
        margin-top: 5px;
        background-color: #fff;
        transform: rotateZ(-45deg);
    }
    .prev {
        left: 0;
    }
    .next {
        right: 0;
    }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Slider</title>
    </head>
    <body>
        <div class="wrapper">
            <div id="slider-wrapper-1">
                <div id="slider1" class="slider-content">
                    <div class="slider-item"></div>
                    <div class="slider-item"></div>
                    <div class="slider-item"></div>
                </div>
                <div id="paging-slider1" class="slider-paging">
                    <div class="paging-item"></div>
                    <div class="paging-item"></div>
                    <div class="paging-item"></div>
                </div>
            </div>
        </div>
    </body>
</html>

标签： cssgoogle-chromecss-transitionspaintopacity