CSS는 : 지연 동적으로 추가 클래스

위해 크롬에서 작동하지 호버 I가 단순히 이상 공중 선회 할 때, 빨간색의 배경 색상을 변경해야합니다 사업부, 생성 다음 코드 :CSS는 : 지연 동적으로 추가 클래스

setTimeout(function() { 
 
    document.getElementById('example-id').className = 'example-class'; 
 
}, 1);

.example-class:hover { 
 
    background: red; 
 
}

<body> 
 
    <div id="example-id">example text</div> 
 
</body>

을

이 코드는 Google 크롬에서 테스트 한 모든 브라우저에서 작동하는 것으로 보입니다.

윈도우 10 홈 : 버전 1703
- 크롬 : 62.0.3202.94
- 파이어 폭스 : 57.0
- 파이어 폭스 ESR : 52.5 특히, 나는 다음과 같은 운영 체제 및 브라우저와 함께 테스트를했습니다 0.0
- 가장자리 : 40.15063.674.0
- IE11 : 11.726.15063.0
OS X 엘 캐피 탄 버전 10.11.6
- 사파리 : 나는의 setTimeout 기능의 사용을 제거하는 경우 버전 11.0.1

그러나, 클래스가 추가되도록 div 즉시, 다음 코드는 모든 브라우저에서 예상대로 작동합니다.

그렇다면 왜 이런 일이 발생합니까? 이 버그는 Google 크롬의 버그입니까, 아니면 어딘가의 사양의 모호성입니까 아니면 다른 것입니까?

출처

2017-11-20 thejonwithnoh

버그가 나타납니다. 나는 [그것을 제출했다] (https://bugs.chromium.org/p/chromium/issues/detail?id=786956). –

후속 CSS에서 요소에 다시 칠하기를 강요하면 문제가 해결 된 것 같습니다 (예 :'.example-class {transform : scale (1)}'). 나는이 사실을 눈치 채지 못하게 할 가능성이 매우 높기 때문에 언급하고있다. (사실 최소한 페이지 하나에 페인트 칠이 일어나지 않는 페이지가 거의 존재하지 않기 때문에이 버그를 거의 알아 차리기가 불가능하다.) 그런데 아주 좋아요. –

@AndreiGheorghiu는 이것을 대답으로 삼아서 받아 들일 수 있다고 생각합니까? – thejonwithnoh

그것은 크롬에서 확실히 버그, 그것을 찾는 소품.

here을 제출했으며 24 시간 이내에 다른 버그가 중복 된 것으로 표시되어 결국 this one으로 되돌아갑니다. 그것은 상수 명명 충돌과 관련이 있거나 최소한 내가 만든 것입니다. (나는 어젯밤에 호기심에서 버그 트레 일을 따라 꽤 많은 시간을 보냈습니다.)

this revision에 의해 수정 된 것으로보고되었지만 Chromium/Chrome 버전 관리에서 안정적인 Chrome을 사용할 수 있는지 알려주는 데 충분하지 않습니다.

한편, 내가 찾은 수정은 :hover 규칙이 선언 된 후, 요소에 다시 그리기를 강제하는 것입니다. 예 : transform:scale(1);.적절한 버그 수정이 안정 크롬으로하게 될 때까지 수정에 대한

이

테스트 :

setTimeout(function() { 
 
    document.getElementById('foo').className = 'bar'; 
 
});

.bar:hover { 
 
    color: red; 
 
} 
 
.bar { 
 
    transform: scale(1); 
 
}

<div id="foo">example text</div>

출처

2017-11-22 14:27:09

와우! 고맙습니다. 나는 이것에 부딪쳤고 크롬 62 위에 있었고, 63으로 업데이트 됨으로써 이것을 수정했다. – Pyrolistical

먼저 Google 크롬의 버그 인 것 같습니다.

한 가지 가능한 대안 솔루션 바닐라 자바 스크립트의 mouseover 및 mouseleave한다 (구글 크롬 - 버전 62.0.3202.94)를 사용하여 이러한 상황을 극복하기 위해 :

setTimeout(function() { 
 

 
    var targetEl=document.getElementById('example-id'); 
 

 
    targetEl.addEventListener("mouseover", function(event) { 
 
    event.target.style.backgroundColor = "red"; 
 
    }, false); 
 

 
    targetEl.addEventListener("mouseleave", function(event) { 
 
    event.target.style.backgroundColor = ""; \t \t  
 
    }, false); 
 

 
}, 1);

<div id="example-id" >example text</div>

출처

2017-11-20 15:52:38 Mamun

CSS는 : 지연 동적으로 추가 클래스

답변

관련 문제