[Bug] Styling, button (pill) corners become square on hover [Firefox]

[joel492]

🐞 Describe the Bug

When using the paypal button in a vue.js project, and loading the page with Firefox (v. 118.0.1), the rounded corners of the button become square on hover.

I created a minimal sample project using this guide: https://cli.vuejs.org/guide/creating-a-project.html using npm install vue@2.6.14 -g and then npm install @paypal/paypal-js.

🔬 Minimal Reproduction

Hover over a paypal button that has style shape pill, using Firefox.

😕 Actual Behavior

The corners become square when hovering the button.

The problem does not occur when using layout: 'horizontal'

🤔 Expected Behavior

The corners stay rounded with their border-radius.

🌍 Environment

• Node.js/npm: v18.16.0/9.5.1
• OS: OS X 14
• Browser: Firefox 118.0.1
• vue.js 2.6.14
• paypal-js 7.0.3

➕ Additional Context

Here is the code I'm using:

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
      <a target="_blank" href="https://v2.vuejs.org/">Vue 2</a>.
    </h3>
    <div id="paypal-container" />
  </div>
</template>

<script>
import { loadScript } from "@paypal/paypal-js";

export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods: {
    renderPaypalButton(paypal) {
      paypal
          .Buttons({
          style: { shape: 'pill' }})
          .render("#paypal-container")
          .catch((error) => {
            console.error("failed to render the PayPal Buttons", error);
          });
    }
  },
  mounted() {
    this.paypal = loadScript({
      clientId: '<my-retracted-paypal-id>',
      currency: 'EUR',
      disableFunding: [
        'card',
        'credit',
        'paylater',
        'bancontact',
        'blik',
        'eps',
        'giropay',
        'ideal',
        'mercadopago',
        'mybank',
        'p24',
        'sepa',
        'sofort',
        'venmo'
      ]
    }).then(paypal => {
      this.renderPaypalButton(paypal);
    });
  }
}
</script>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    display: block;
    text-align: left;
  }
}
</style>

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[valoricDe]

@gregjopa Hi there. Is there something needed to be able to work on this, except of time we all lack xD