@@ -431,19 +431,37 @@ function RemoteFunctions(config, remoteWSPort) {
431431 highlight . className = HIGHLIGHT_CLASSNAME ;
432432
433433 var offset = _screenOffset ( element ) ;
434+
435+ var el = element ,
436+ offsetLeft = 0 ,
437+ offsetTop = 0 ;
438+
439+ // Probably the easiest way to get elements position without including transform
440+ do {
441+ offsetLeft += el . offsetLeft ;
442+ offsetTop += el . offsetTop ;
443+ el = el . offsetParent ;
444+ } while ( el ) ;
434445
435446 var stylesToSet = {
436- "left" : offset . left + "px" ,
437- "top" : offset . top + "px" ,
438- "width" : elementBounds . width + "px" ,
439- "height" : elementBounds . height + "px" ,
447+ "left" : offsetLeft + "px" ,
448+ "top" : offsetTop + "px" ,
449+ "width" : innerWidth + "px" ,
450+ "height" : innerHeight + "px" ,
440451 "z-index" : 2000000 ,
441452 "margin" : 0 ,
442453 "padding" : 0 ,
443454 "position" : "absolute" ,
444455 "pointer-events" : "none" ,
445456 "box-shadow" : "0 0 1px #fff" ,
446- "box-sizing" : "border-box"
457+ "box-sizing" : elementStyling . getPropertyValue ( 'box-sizing' ) ,
458+ "border-right" : elementStyling . getPropertyValue ( 'border-right' ) ,
459+ "border-left" : elementStyling . getPropertyValue ( 'border-left' ) ,
460+ "border-top" : elementStyling . getPropertyValue ( 'border-top' ) ,
461+ "border-bottom" : elementStyling . getPropertyValue ( 'border-bottom' ) ,
462+ "transform" : elementStyling . getPropertyValue ( 'transform' ) ,
463+ "transform-origin" : elementStyling . getPropertyValue ( 'transform-origin' ) ,
464+ "border-color" : config . remoteHighlight . borderColor
447465 } ;
448466
449467 var mergedStyles = Object . assign ( { } , stylesToSet , config . remoteHighlight . stylesToSet ) ;
0 commit comments