element 组件＜Select 选择器、Cascader 级联选择器＞适配移动端需要点击两次才能选中的问题

问题描述：
出于业务需要，要做响应式（在原pc网页的基础上做关于移动端的适配），嫌麻烦就直接将pc的element组件样式进行修改以达到适配移动端，在浏览器中预览时，效果正常当使用ios系统的手机查看时，选中目标时需要点击两下才能选中对应的内容
思考：
第一下点击时，显示的内容像鼠标hover时的效果，在点击第二下才会选中。
感觉可能是样式导致问题，但不清楚具体是因为什么，有知道的望不吝赐教。
问题处理：
在element官方的issues中找到了对应的内容，同时附上了解决方法，如下：
 

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

因为这两个选择器的内容部分都是在根元素__nuxt（app）之外，重新打开一个div标签属于页面之外的

级联选择器
 

选择器

所以这段代码不能写在页面内需要在全局下编写或者在页面内重新添加一个不带有scope的style标签

<style lang="scss">
    .el-scrollbar {
      > .el-scrollbar__bar {
        opacity: 1;
      }
    }    
</style>

添加上之后就解决了这个问题。
PS：如果有知道具体原因的还请留言，谢谢。