Why would a style that has been computed only work after toggling in devtools? (IE and Edge)

Question

I have a css class like this:

.open-drawer {
  transform: translateX(0px);
  border-left: 1px solid grey;
  margin-left 3px;
}

This class is added on a div which slides it out into view on a user's click of a button. The margin-left says it's computed in IE11/Edge developer tools, it hasn't been overriden or anything either, but fails to actually appear in the browser.

This is specific to IE and Edge, in Chrome and Firefox it works as expected.

The really odd thing is when I toggle margin-left off and on again in the IE/Edge developer tools, it suddenly fixes/applies itself and appears as expected.

These short clips are to help see that the margin is visible in Chrome but not IE. The margin is most visible as the gap between the double lines, the left borders of open drawers. In Chrome we see this but in IE not until we toggle off and on the property in devtools as the video shows:

• Chrome: https://youtu.be/LQz3OkVl6WI
• IE11: https://youtu.be/A4gV4ZwUt0w

I have a feeling it might be something to do with the timing when the rendering engine does layout and maybe the transform/translate is affecting it, but really no idea. Not sure how to further narrow down what's going on and the source code for Trident or EdgeHTML is proprietary.

Any ideas anyone?

Answer 1

Does it work onrealod when dev tool is just opened?

If you have console.log in code, but dev tool is closed - IE return error. You need to code var console = { log : function(t){}}; somewhere in start of your js or remove all console logs.

---

This is one of known issue, maybe I did not understood your tasks properly.