Skip to content

Commit 0b897da

Browse files
stephanwleedna2github
authored andcommitted
style: optimize paint by putting contain: strict (tensorflow#5461)
Notice that mouse move was causing large paints that it should not. Putting `contain: strict` which informs browser to put a bound to style calculation helped alleviate the issue. Repro: in time series dashboard, with "Rendering > Paint Flashing" option enabled, mouse move in the dashboard.
1 parent 04c2942 commit 0b897da

File tree

2 files changed

+2
-0
lines changed

2 files changed

+2
-0
lines changed

tensorboard/webapp/core/views/layout_container.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ limitations under the License.
3030
.expand {
3131
@include tb-theme-foreground-prop(border-color, border);
3232
box-sizing: border-box;
33+
contain: strict;
3334
flex: 0 0;
3435
justify-self: stretch;
3536
}

tensorboard/webapp/metrics/views/metrics_container.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ limitations under the License.
1616
@import 'tensorboard/webapp/theme/tb_theme';
1717

1818
:host {
19+
contain: strict;
1920
display: flex;
2021
flex-direction: column;
2122
height: 100%;

0 commit comments

Comments
 (0)