Непрозрачность перехода, влияющего на цвет фона смежного элемента

Я показываю элемент, используя переход CSS, который запускается с помощью события прокрутки JavaScript, однако этот переход влияет на цвет фона смежного элемента в Safari (5.1.7) и Chrome (27.0.1453.93) на Mac (10.6.8), что не имеет никакого смысла. Кажется, я наткнулся на ошибку.Непрозрачность перехода, влияющего на цвет фона смежного элемента

я продублировал вопрос в Safari только с помощью следующего, урезанного кода и создал jsfiddle (http://jsfiddle.net/5AEMF/), но проблема не возникает в этом контексте:

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta charset="utf-8"> 
<title>Opacity transition affecting color of adjacent element</title> 
<style> 
* { 
    margin: 0; 
    padding: 0; 
} 

#bar { 
    height: 100px; 
    background-color: #FF0000; 
} 

#content { 
    opacity: 0; 
    height: 9999px; 
    background-color: #0000FF; 
    -webkit-transition: opacity 0.25s ease-in-out; 
    -moz-transition: opacity 0.25s ease-in-out; 
    -o-transition: opacity 0.25s ease-in-out; 
    transition: opacity 0.25s ease-in-out; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

#content.scrolled { 
    opacity: 1; 
} 
</style> 

<script type="text/javascript"> 
var scrolled = false; 

var init = function() { 
    onScroll(null); 
    window.addEventListener('scroll', onScroll); 
}; 

var onScroll = function(e) { 
    if (window.scrollY > 0 && !scrolled) { 
     scrolled = true; 
     document.getElementById('content').className = 'scrolled'; 
    } else if (window.scrollY === 0 && scrolled) { 
     scrolled = false; 
     document.getElementById('content').removeAttribute('class'); 
    } 
}; 

window.addEventListener('load', init); 
</script> 
</head> 
<body> 
<div id="bar"></div> 
<div id="content"></div> 
</body> 
</html>

Интересно, есть ли обходной путь для Эта проблема. Любая помощь будет принята с благодарностью.

источник

2013-05-30 Andrew

Похоже на побочный продукт аппаратного ускорения. Несмотря на то, что переходный элемент не имеет видимости обратной поверхности. – Andrew

Я не вижу никаких ошибок. на какие элементы влияет цвет bg? Вы можете попробовать jquery анимацию вместо перехода css. – user1721135

Использовать цвета в форме RGB, например: color:rgba(255, 106, 0, 0.24) Последний параметр в этом товаре 0.24 - непрозрачность. сделайте это 0, и он будет прозрачным.

источник

2013-09-17 11:13:13

Непрозрачность перехода, влияющего на цвет фона смежного элемента

ответ

Смежные вопросы