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 could be the reason for Bootstrap not functioning on the homepage of my Laravel website?

My Laravel Journey As a newcomer to Laravel, I decided to dive in and learn by following tutorials on YouTube. The first step was uploading my project to a domain to test database connections using MySQL instead of SQLite as shown in the tutorial. Although ...

laravelvue.jsbootstrap-4

Tips on customizing the appearance of mat-card-title within a mat-card

Is there a way to truncate the title of a mat card when it overflows? I tried using the following CSS: overflow:hidden text-overflow:ellipsis white-space: nowrap However, the style is being overridden by the default mat-card style. I attempted to use mat ...

javascripthtmlcssangularfrontend

How can you make the contents of a <DIV> expand?

Picture a scenario where I have a navigation bar in the header of my web page, consisting of several links. What I want is for these links to expand horizontally to fill the parent container without me having to hard-code based on the number of links. In o ...

htmlcss

Display a list next to a block of text and image using HTML and CSS styling

I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet: <bo ...

htmlcss

The npm error message indicates that there is an issue with the transpileDependencies.map function

Every time I attempt to execute my program, this error pops up: https://i.stack.imgur.com/ANA0z.png Even after uninstalling and reinstalling node, the error persists. ...

node.jsvue.jsnpm

The Beginner's Guide to Mastering Ajax and Grails

As a newcomer to Grails and AJAX, I find myself struggling to understand the concept of AJAX with limited resources online. My current understanding is that in Grails, if I want to trigger a method in one of my controllers when a specific part of my HTML ...

htmlcssajaxgrailsweb-applications

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

cssvue.jssasspseudo-element

What could be causing the discrepancy in sizes of the columns in my multi-column layout?

https://jsfiddle.net/drqjmssy/ Seeking assistance from the linked jsfiddle, I aim to align "div class='main_content'" vertically with "div class='sidebar'". What would be the best approach to achieve this alignment? In case the fiddle ...

htmlcss

How to apply a custom CSS class to a Smarty tag in CMS Made Simple

Greetings! I am currently in the process of revamping a page using CMSmadesimple, However, I have limited knowledge when it comes to utilizing CMSms and Smartytags. The page contains various smartytags that require styling. One particular tag that needs ...

csscontent-management-systemsmartycmsmadesimple

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

htmlcsspositionspacing

Navigating global variables and functions in Vue3 with TypeScript

Feeling lost in the world of Vue.js, seeking guidance here. Attempting to handle global data and its corresponding functions has led me on a journey. Initially, I experimented with declaring a global variable. But as more functions came into play, I trans ...

typescriptvue.jsglobal-variablesvuejs3

If the item with the specified name is not found in the list, display an image using Vue's v-if directive

<ul class="ulItems" v-for="item in listingItems" :key="item.channels"> <li class="liItems"> {{ item.itemName }} </li> </ul> I am looking to incorporate an image in situations where th ...

javascriptvue.jsvuejs2vue-component

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

This situation is causing me frustration... depending on the zoom level of the browser, my boxes do not align properly and it ends up looking messy (in all browsers). Any advice? Could I handle this more effectively with jQuery? HTML </div> <div ...

csshtmlzoomingfadeout

Changing Background Colors of Grid Items in React.js Grid Layout

I'm currently learning React and have created a basic app that shows data from a database in a grid format. I'm looking to customize the background colors of each grid item based on its priority level, which is pulled from the database. The prior ...

cssreactjsgridview

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

Tips for resizing a browser window using an HTML element

I decided to add a unique feature to my website - a handle in the bottom right corner that users can grab and drag to the left to see how the design adapts to different browser window sizes (Responsive Design). To implement this, I included the following ...

htmlcssbrowserwebkitresponsive-design

How to set default props in Vue Select component?

I have been utilizing the vue-multiselect plugin from this website: Given that I plan to use it frequently, I am interested in establishing some default props. For instance, my aim is to have the selectLabel prop set as an empty string and possibly con ...

javascriptvue.jsdefaultsvue-select

Overlay text on top of image with fading transparency when hovering over it

Is there a way to make the transparent layer that appears when hovering over an image on a card only cover the image itself and not extend onto the footer of the card? Currently, the image on the card covers most of it, and I want the hover overlay to beh ...

htmlcssimage

Using the setTimeout function in Vue.js to trigger the play of an audio file at a specified

I have set up a Vue-audio player in my Vue.js application using the AudioPlayer component. This is my code: <template> <vue-audio id = "myAudio" :file= "file1"/> </template> <script> import VueAudio from 'vue-audio'; ...

javascriptvue.js

What could be preventing certain child elements from rendering in the browser when using scss/ compiled css?

I currently work with the Visual Studio Code editor and execute "npm run sass" in the bash terminal. Whenever I modify the scss file, the terminal displays the following message: => changed: C:\Users\kenne\modern_portfolio\scss\m ...

htmlcssnpmsass