Closed djdembeck closed 1 year ago
@djdembeck the Material styled variants are handled with CSS, per:
That's it, that's all that occurs when you implement those classes - some additional styles are added.
The only style that might have an affect on performance would be backdrop-blur
, which provides a blur effect to the background of the input element. We implement this to help visibility on busy backgrounds. When you're talking tables this means you could easily have dozens and dozens of instances of elements using this style.
So I'd recommend the following:
app.postcss
, giving them a unique name, and testing if without the backdrop blur is functional. If so we know the culprit.Thanks for the quick response!
- Shorterm - I'd suggest copying these CSS classes locally into your
app.postcss
, giving them a unique name, and testing if without the backdrop blur is functional. If so we know the culprit.
You were correct, removing only backdrop-blur
resolves the issue.
It may be worth mentioning as well, this seems to be a Blink (Vivaldi/Chrome) engine issue. I tested on Firefox, and with backdrop-blur
enabled, there is no slowdown (at least to the magnitude Vivaldi had issue).
Thank you for confirming @djdembeck, then the role of this ticket will be to remove that in an upcoming patch.
Yeah browser each have their own ways to go about this. It may be they lean on the CPU more than the GPU for this effect in particular. Hopefully that changes in the future. The latter would likely be more performant when a good GPU is present!
Current Behavior
In a table-based form of repeated rows of inputs, all 3 columns use
class="input variant-form-material"
. When the form is loaded, there is a visual issue on the page, the browser slows down, and my CPU meter goes to 100%. If I removevariant-form-material
only, the CPU usage goes back to normal on that page.Expected Behavior
Using
variant-form-material
on a repeated input form, should have no affect on performance, compared to standard styling.Steps To Reproduce
structure for each td. In my test case, I am using this in a table with 35 items (on an edit form), within a Stepper component.
td
elements.Link to Reproduction / Stackblitz
No response
More Information
No response