Explanation on window.getComputedStyle and why Chrome handles it differently
dom, google-chrome, javascript, web-standards
Solution
It seems that this is a reported Chromium bug.
Problem
Since Chrome Stable landed v.33.0.1750.117, the logic of window.getComputedStyle has changed from other browsers. Fiddle of code below: http://jsfiddle.net/HD4bD/17/ Can anyone explain what changed and what is the 'correct' ruling on this? Given the following: HTML ``` <body> <div class="normal"></div> <div class="display-none"></div> <div class="visibility-hidden"></div> </body> ``` CSS ``` .normal:before { content: "NORMAL: " } .display-none:before { content: "DISPLAY-NONE: "; display: none; } .visibility-hidden:before { content: "VIS-HIDDEN: " visibility: hidden; } ``` JS ``` var $ = document.querySelector.bind(document), pass = "This text should have 1 or more labels before it", fail = "The label is missing. Something's wrong.", normalContent = getB4Content('.normal'), dNoneContent = getB4Content('.display-none'), vHideContent = getB4Content('.visibility-hidden'); function getB4Content(selector){ return window.getComputedStyle($(selector),':before').getPropertyValue('content'); } $('.normal').innerHTML = normalContent === '' ? fail : normalContent + pass; $('.display-none').innerHTML = dNoneContent === '' ? fail : dNoneContent + pass; $('.visibility-hidden').innerHTML = vHideContent === '' ? fail : vHideContent + pass; ``` OUTPUT Firefox v27: NORMAL: "NORMAL: "This text should have 1 or more labels before it "DISPLAY-NONE: "This text should have 1 or more labels before it noneThis text should have 1 or more labels before it IE 11 NORMAL: "NORMAL: "This text should have 1 or more labels before it "DISPLAY-NONE: "This text should have 1 or more labels before it noneThis text should have 1 or more labels before it Chrome v33 NORMAL: "NORMAL: "This text should have 1 or more labels before it The label is missing. Something's wrong. The label is missing. Something's wrong.