Skip to content

Commit 49cfdd5

Browse files
authored
Merge pull request #50 from verlok/patch-1
Using outline instead of border to avoid the layout to shift
2 parents 92e7073 + 58b9b5f commit 49cfdd5

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

SNIPPETS.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const po = new PerformanceObserver((list) => {
8686
/**
8787
* Highlight LCP elements on the page
8888
*/
89-
item.element ? (item.element.style = "border: 5px dotted blue;") : "";
89+
item.element ? (item.element.style = "outline: 5px solid blue; outline-offset: -5px;") : "";
9090
});
9191

9292
/**
@@ -871,7 +871,7 @@ const shifts = [];
871871

872872
// threshold ex: 0.05
873873
// Layout Shifts will be grouped by color.
874-
// All nodes attributed to the shift will have a border with the corresponding color
874+
// All nodes attributed to the shift will have an outline with the corresponding color
875875
// Shift value will be added above parent node.
876876
// Will have all details related to that shift in dropdown
877877
// Useful for single page applications and finding shifts after initial load
@@ -892,7 +892,7 @@ function findShifts(threshold) {
892892
valueNode.style = `color: ${color};`;
893893
entry.sources.forEach((source) => {
894894
source.node.parentNode.insertBefore(valueNode, source.node);
895-
source.node.style = `border: 2px ${color} solid`;
895+
source.node.style = `outline: 2px ${color} solid; outline-offset: -2px`;
896896
});
897897
}
898898
});

0 commit comments

Comments
 (0)