CSS radio button not showing up on Safari browser

I am encountering an issue with my vue app where it functions correctly on Google Chrome but experiences problems on Safari. Specifically, the issue arises with components containing radio buttons. Upon clicking on a radio option, the selected color (blue) does not display immediately (although the option is registering in my responses JSON). Strangely, clicking on the option a second time causes it to appear. Can anyone provide insight into why this occurs on Safari while working fine on Chrome?

For reference, you can view the UI here:

Additionally, the code for the component can be found here: https://github.com/sanuann/schema-ui/blob/master/src/components/Inputs/WebRadio/Radio.vue

The entire build process is conducted using Github actions and deployment is done via gh-pages.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display only distinct dates in the ng-repeat list

I'm trying to display an unordered list created using ng-repeat. Each list item includes a month header and a blog post. I'm struggling to find a clean solution to only show one instance of each month name without resorting to complex jQuery hac ...

The environment variable process.env.variable works perfectly fine during local development, however, it seems to malfunction once the application is deployed to Heroku within

Currently, I am utilizing nuxt.js and attempting to display images dynamically. To achieve this, I have implemented the BASE_URL variable within the .env file, allowing me to access image files based on the set BASE_URL in my local environment. .env file ...

Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this? I'm not sure if the current HTML structure is correct or if I should swit ...

Tips for creating Card-Title responsiveness across various screen dimensions with Bootstrap 4

I'm a beginner in web design and I'm wondering if it's possible to adjust the font-size of the card-title and the size of the card image based on different screen sizes using bootstrap 4. When viewed on small screens, they appear too large. ...

Transforming the text color after clicking on it on Squarespace - here's how to do it!

How can I make text change color upon clicking in Squarespace? Where should I place the block id in the code to target a specific block? Check out the code snippet I've been experimenting with: <script> document.getElementById('chang ...

How can I retrieve a Vuex data property from another Vuex data property?

In order to make color variables easily accessible throughout my Vue app, I have stored them in an array named "colors[]" within the Vuex store. This method works well when accessing the colors within component methods or inline styles. Now, I am storing ...

Unusual behavior in iOS Safari when double-clicking or hovering

After completing a responsive redesign for one of my websites, I noticed an unusual behavior with the links that went unnoticed by testers: When clicking on these links, they are only "activated" but not followed. However, if you click them again, they wo ...

Where is the ideal location to store non-component data properties in Vue.js?

Currently, I am in the midst of a Vue.js project where components are predominantly used. However, there are moments when I simply need to incorporate some Vue.js syntax without creating an entire component. Since I am not utilizing the render function as ...

Placing three div elements within a container, one of which has a height set to auto

I need help arranging 3 divs side by side using float:left. The height for two of the div's (child1 and child3) is fixed, but there is no set height for child2 - I would like child2 to have the same height as the container div. <div id="container ...

Tips for including a numerical quantity to an existing value

I have developed a PHP code for adding products to a cart. The code is designed in such a way that when a user selects an existing product in the cart, the quantity of the existing product and the newly inputted quantity will be combined together. $se ...

What is the best way to create a function library that works seamlessly across all of my Vue.js components?

I am currently in the process of developing a financial application using Vue.js and Vuetify. As part of my project, I have created several component files such as Dashboard.vue Cashflow.vue NetWorth.vue stores.js <- Vue Vuex Throughout my development ...

Toggle the visibility of 2 Form Fields by checking the Checkbox

Hi, I am trying to display two form fields when a checkbox is selected. These fields are required, so they should only be displayed when the checkbox is checked and should be mandatory. However, I am facing issues with hiding the fields when the checkbox i ...

Exploring Nuxt.js: Enhancing User Experience with Dynamic Page

Within my nuxt.config.js file, I included the line loading: '~/components/LoadingBar.vue'. After launching the site, I noticed that my custom page transition only works when the first page visited is anything other than the home page. For insta ...

Tips for utilizing a 'v-for' directive with objects within a blade element in Vue.js

I am currently working on a code that includes a loop within which there is an <a> tag. I aim to generate the link for this tag using a server-side code function. An excerpt from my code is as follows: <div v-for="file in file ...

Methods to constrain click event handling between parent and child elements in Vue.js

I am currently in the process of converting a semantic-ui component to rely on Vue.js rather than jQuery. However, I am facing an issue with isolating v-on:click between a child and its parent element. In the example below, I have a button that uses v-on: ...

I'd love some clarity on the concept of stacking contexts

After encountering a bug with a non-clickable video player inside a jquery ui dialog, I resolved the issue by changing position:relative; to position:inherit; Other solutions included removing position:relative; altogether or adjusting the z-index of the ...

What is the best way to optimize Bootstrap 5 grids for mobile responsiveness?

Within my portfolio, I have a projects section that switches between having the description on the left with an image on the right and vice versa. Despite my efforts to make it responsive, I'm struggling to figure out how to ensure the image appears a ...

Coat the div with a uniform shade of pure white

I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...

Troubleshooting: Vite fails to execute "npm run build" with Vue3

I am encountering an issue with my Vue3 project where it runs smoothly on development using npm run dev. However, when I try to build it using npm run build, the process fails: C:\projects-intellij\myapp> npm run build > <a href="/cdn-c ...

The presence of whitespace is causing disruptions in the text alignment within div elements

I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...