Элемент пользовательского интерфейса - VueJS - ошибка двойного касания при выборе ввода на IOS

Question

У меня странная проблема с iOS safari или chrome, когда я пытаюсь выбрать параметр из ввода выбора, когда я касаюсь селектора, он показывает параметры правильно при первом нажатии, но затем, когда я пытаюсь выберите вариант, мне нужно дважды нажать, чтобы он заработал, это мой фактический сценарий:

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

Вот мой выбор ввода:

                        <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")
      }
  },

Эта проблема, кажется, возникает только на iOS, я тестировал android chrome браузер и работает безупречно.

Есть идеи, что могло вызвать эту проблему?

Answer 1

Посмотрев некоторое время, я нашел обходной путь в проблемах Element UI Github, прямо здесь:

Element UI Github Issue

По-видимому, это связано с при наведении указателя мыши он не управляется на iOS, и это хорошо известная проблема, на этот случай решение, похоже, добавляет следующий S CSS в приложение. vue:

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

Но почему-то в моем случае это не сработало, поэтому я сделал это с помощью всего css:

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

И все, это решило проблему двойного касания с Element UI.

Надеюсь, это поможет кому-то другому.