[Bug] Styling, button (pill) corners become square on hover [Firefox]
joel492 opened this issue · 2 comments
🐞 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>
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!