Chrome - highlight corresponding element on webpage when node hovered in web inspector

I am using Chrome to debug and test my website, however for some reason when I use the element inspector, and highlight over a node, usually the corresponding element in the web page itself is highlighted开发者_运维问答 to show width/height/margin/padding etc... however for some reason its not doing this with my site, I have tested it for other websites and it works fine for them... I have also tried it in Safari and in there it works?!

I have no idea why this could be, my only thought is that I must have set something in the CSS which prevents some styling with this feature until I tested it in Safari.

Give this a try, its sort of a workaround.

press CTRL + SHIFT + C and mouse over the element you want to inspect.

Could you be more specific? "Turned on"?

Edit: I found indeed that I have to disable all this:

style.webkitTransform = translate3d(...) (Javascript)
-webkit-transform: translate3d(...) (CSS)
-webkit-backface-visibility: hidden (CSS)

In stead you can use:

Javacsript

var matrix = new WebKitCSSMatrix();
matrix.e = deltaX;
matrix.f = deltaY;
myElement.style.webkitTransform = matrix;

CSS

-webkit-transform:  matrix(1,0,0,1,deltaX,deltaY);