Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is the current setup:

"element-ui": "^2.13.1", "vue": "^2.6.11"

Here is the code for the select input:

                        <el-select class="select-danger"
                                   placeholder="Language / Idioma"
                                   v-model="locale">
                            <el-option v-for="option in selects.languages"
                                       class="select-danger"
                                       :value="option.value"
                                       :label="option.label"
                                       :key="option.label">
                            </el-option>
                        </el-select>


watch: {
      // watch for locale changes
      locale: function (value) {
          alert("selected")
      }
  },

This issue appears to be specific to iOS, as testing on Android Chrome browser shows no such problems.

Any thoughts on what could be causing this behavior?

cssiosvue.jsmobile-safarielement-ui

Answer №1

After searching for a solution, I came across a workaround in the Element UI Github issues section. You can find it right here:

Element UI Github Issue Link

It appears that the hover state is not well managed on iOS, which is a known issue. The suggested solution involves adding the following SCSS to App.vue:

.el-scrollbar {
    > .el-scrollbar__bar {
        opacity: 1;
    }
}

However, this approach did not work for me, so I ended up using plain CSS instead:

/*Fixes double tap on iOS*/
.el-scrollbar__bar {
    opacity: 1!important;
}

This simple fix resolved the double tap issue with Element UI. Hopefully, this information proves helpful to others facing the same problem.

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

What is the best way to create rounded thumbnails with the paperclip gem?

I noticed that the latest version of Basecamp is implementing this feature, you can check it out in this link. I am curious about how to replicate this in my Rails 3 application. ...

cssruby-on-rails-3paperclipthumbnails

Jquery is not displaying the background color of the progress bar

Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you c ...

javascriptjqueryhtmlcss

Steps for ensuring a div component appears on top of any other component (like h1 or p)

The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...

javascripthtmlcssreactjs

Leveraging Vue's `:is` property for dynamically rendering components using a configuration object

I have created a confirmation popup Vue component with the following configuration object: { title: null, message: null, onConfirm: null, onDismiss: null, modal_class: null, icon: null, confirmBtnText: null, confirmBtnColor: null, compon ...

vue.js

Liquid backdrop centered immobile elements

I'm facing some challenges trying to figure out the most efficient and correct way to achieve this layout, similar to Stack Overflow's design. I want a header with a background color that spans the entire width of the page, while keeping the cont ...

htmlcss

What is the best way to save various data instances under one keyword in Firebase using Swift?

Currently in the process of developing an iOS application with a built-in shopping cart feature. I have successfully implemented screens for item selection and quantity selection, but when it comes to storing selected items in Firebase for easy access late ...

iosswiftfirebasefirebase-realtime-database

Tips for maintaining an updated array's consistency on page refresh in Vue.js?

HelloWorld.vue Dynamic routing in Vuejs: <template> <div> <b>Vuejs dynamic routing</b> <div v-for="item in items" :key="item.id"> <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp; <rou ...

javascriptvue.jsvuex

What is the best way to set up unique body backgrounds for each page in WordPress?

My website consists of various pages named as : page-X.php page-Y.php page-Z.php These three pages mentioned above require unique background colors. However, the remaining pages/posts on my site inherit their background-color from the style.css file. ...

htmlcsswordpresswordpress-theming

Connecting to Azure using Point to Site VPN on IOS devices such as IPad and IPhone

I'm curious if connecting from an IOS device to an Azure Point to Site VPN is feasible, even though I know it's not officially supported. I've heard suggestions about using SSTP, but haven't found a clear example. Could someone clarify ...

iosiphoneazureipadazure-virtual-network

Responsive Text in HTML Email Depending on Device

I currently have an email template that is functioning perfectly, but I am looking to take it to the next level. The top navigation of the email consists of 4 columns of text. To ensure that it appears well on both desktop and mobile devices, the font size ...

htmlcssmedia-querieshtml-emailemail-templates

Trouble displaying certain HTML code and its output on the browser?

I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...

htmlcss

What is the process for invoking a function from a sibling component upon pressing a button?

Hello, I need some assistance. I have created a calendar that displays events set by the user and now I want to implement a feature where clicking on an event will show detailed information about it. The issue is that the events are in one component while ...

vue.jsvue-component

"Customize your Angular application by updating the background with a specified URL

Hello there, I've been attempting to modify the background URL once a button is clicked. In my CSS, I have the following default style set up. .whole-container { background: linear-gradient( rgba(0, 0, 0, 2.5), ...

htmlcssangular

Is gulp.dest set to match the current file?

I'm having trouble directing my compiled .css file to the same directory as its original .scss version. gulp.task('sass', function() { return gulp.src([ appDir + '/*.scss', appDir + '/**/*. ...

csssassgulpgulp-sass

Updating the view in Vue.js after making an API request

I am currently in the process of developing a basic shopping cart system using Laravel and Vue. The functionality to add and remove items from the basket is working smoothly. However, I am encountering an issue where I have to manually refresh the page in ...

laravelvue.js

Changing the color of a progress bar in Bootstrap based on a specific percentage level

var elem = document.getElementById("progress-bar"); var progress = 75; elem.style.width = 80 + '%'; if (progress > 80) { elem.style.background = "red"; } #myProgress { height: 5px; } #progress-bar { w ...

javascripthtmlcsstwitter-bootstrapprogress-bar

"Discover the secrets of flipping a webpage just like turning the pages of

I recently designed a basic website with 4 separate pages. The homepage includes navigation links for each page, such as - Page1 page2 Page3 Page4 My goal now is to create a feature where clicking on any of these links will open the corresponding page wi ...

htmlcss

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

javascriptjqueryhtmlcsshref

Section is obstructing the view of Other Section above

I am struggling to create a responsive design for these two sections, both of which display quite similarly in line. Here are the resolutions for desktop and tablet/mobile: https://i.sstatic.net/XWbSP.png https://i.sstatic.net/3KLyY.png I suspect the is ...

cssresponsivebootstrap-5displayflexboxgrid

To make table headers remain stationary as the data scrolls with JavaScript

When using Explorer, I was able to fix the "thead" part of my table while scrolling by using CSS expressions. The following CSS code snippet showcases how it's done: .standardTable thead tr { position: relative; top: expression(offsetParent.scrollTo ...

javascriptjqueryhtmlcss