fix(v-ripple): only modify position if current one is static

[nekosaur]

Description

solves problems when using for example position sticky

Motivation and Context

closes #2573

How Has This Been Tested?

visually, playground

Markup:

<template>
  <v-app id="inspire">
    <v-content>
      <v-card ripple hover style="width:300px;margin:20px">
        <v-card-title>
          <div class="headline">awesome title</div>
        </v-card-title>
        <v-card-text>
          blueberry muffins are amazing!!!!
        </v-card-text>
      </v-card>

      <v-card ripple hover style="width:300px;margin:20px;position:static">
        <v-card-title>
          <div class="headline">awesome title</div>
        </v-card-title>
        <v-card-text>
          blueberry muffins are amazing!!!!
        </v-card-text>
      </v-card>

      <v-card ripple hover style="width:300px;margin:20px" class="static">
        <v-card-title>
          <div class="headline">awesome title</div>
        </v-card-title>
        <v-card-text>
          blueberry muffins are amazing!!!!
        </v-card-text>
      </v-card>

      <v-card ripple hover style="width:300px;margin:20px;position:absolute;left:200px">
        <v-card-title>
          <div class="headline">awesome title</div>
        </v-card-title>
        <v-card-text>
          blueberry muffins are amazing!!!!
        </v-card-text>
      </v-card>

      <v-card ripple hover style="width:300px;margin:20px" class="sticky">
        <v-card-title>
          <div class="headline">awesome title</div>
        </v-card-title>
        <v-card-text>
          blueberry muffins are amazing!!!!
        </v-card-text>
      </v-card>
      <br v-for="i in 100" :key="i">
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
    })
  }
</script>

<style>
  .v-card.static {
    position: static;
  }

  .v-card.sticky {
    position: sticky;
    top: 30px;
    left: 800px;
  }
</style>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have created a PR in the documentation with the necessary changes.

[codecov]

Codecov Report

Merging #5249 into master will decrease coverage by 0.4%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #5249      +/-   ##
==========================================
- Coverage   89.14%   88.73%   -0.41%     
==========================================
  Files         230      230              
  Lines        5474     5657     +183     
  Branches     1378     1449      +71     
==========================================
+ Hits         4880     5020     +140     
- Misses        475      499      +24     
- Partials      119      138      +19

Impacted Files	Coverage Δ
src/directives/ripple.ts	40.21% <0%> (-1.83%)	⬇️
src/components/VDialog/VDialog.js	71.73% <0%> (-0.2%)	⬇️
src/components/VStepper/VStepperContent.js	100% <0%> (ø)	⬆️
src/components/VSelect/VSelect.js	88.31% <0%> (+0.05%)	⬆️
src/components/VStepper/VStepper.js	12.24% <0%> (+2.56%)	⬆️
src/components/VStepper/VStepperStep.js	71.11% <0%> (+3.11%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 70d7bc0...841c003. Read the comment docs.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord