Skip to content

Commit a647c52

Browse files
crisbetoandrewseguin
authored andcommitted
chore(elevation): remove unnecessary will-change (#5011)
Removes some premature optimization that was being done via `will-change` in the elevation styles. [As per MDN](https://developer.mozilla.org/en/docs/Web/CSS/will-change), we should be careful about how we use `will-change` since it could end up hurting performance.
1 parent 9c45865 commit a647c52

File tree

1 file changed

+4
-11
lines changed

1 file changed

+4
-11
lines changed

src/lib/core/style/_elevation.scss

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,6 @@ $_ambient-elevation-map: (
120120
);
121121

122122

123-
// The css property used for elevation. In most cases this should not be changed. It is exposed
124-
// as a variable for abstraction / easy use when needing to reference the property directly, for
125-
// example in a will-change rule.
126-
$mat-elevation-property: box-shadow !default;
127-
128123
// The default duration value for elevation transitions.
129124
$mat-elevation-transition-duration: 280ms !default;
130125

@@ -141,9 +136,9 @@ $mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function
141136
@error '$zValue must be between 0 and 24';
142137
}
143138

144-
#{$mat-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)},
145-
#{map-get($_penumbra-elevation-map, $zValue)},
146-
#{map-get($_ambient-elevation-map, $zValue)};
139+
box-shadow: #{map-get($_umbra-elevation-map, $zValue)},
140+
#{map-get($_penumbra-elevation-map, $zValue)},
141+
#{map-get($_ambient-elevation-map, $zValue)};
147142
}
148143

149144
// Returns a string that can be used as the value for a transition property for elevation.
@@ -152,12 +147,11 @@ $mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function
152147
//
153148
// .foo {
154149
// transition: mat-elevation-transition-property-value(), opacity 100ms ease;
155-
// will-change: $mat-elevation-property, opacity;
156150
// }
157151
@function mat-elevation-transition-property-value(
158152
$duration: $mat-elevation-transition-duration,
159153
$easing: $mat-elevation-transition-timing-function) {
160-
@return #{$mat-elevation-property} #{$duration} #{$easing};
154+
@return box-shadow #{$duration} #{$easing};
161155
}
162156

163157
// Applies the correct css rules needed to have an element transition between elevations.
@@ -170,5 +164,4 @@ $mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function
170164
$duration: $mat-elevation-transition-duration,
171165
$easing: $mat-elevation-transition-timing-function) {
172166
transition: mat-elevation-transition-property-value($duration, $easing);
173-
will-change: $mat-elevation-property;
174167
}

0 commit comments

Comments
 (0)