zoukankan      html  css  js  c++  java
  • 解决 el-select 与 el-radio 组合字体发生闪烁问题

    vue-layer弹出层中,使用 el-select 与 el-radio 结构,点击下拉或勾选的时候,整个页面发生闪烁,字体也会变模糊
    <g-form class="g-from-typography-many" :labelSuffix="''">
          <el-row>
            <el-col :span="15">
              <el-form-item label="主要关键字">
                <el-select v-model="sortKey1">
                  <el-option v-for="item in sortList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="1">
                <el-radio-group v-model="sort1">
                  <el-radio  label="asc">升序</el-radio>
                  <el-radio  label="desc">降序</el-radio>
                </el-radio-group>
            </el-col>
          </el-row>
    

      

    寻找到原因:css transform属性导致

    解决方法:修改弹出层宽度与高度(效率最高)

     其它方法:设置  -webkit-backface-visibility: hidden! 属性  (比较繁琐,解决了闪烁问题会出现字体模糊问题)

    .el-scrollbar__thumb{transform: none!important;}
    .vl-notice-title{ -webkit-backface-visibility: hidden!important;}
    .vl-notify-alert{ -webkit-backface-visibility: hidden!important;}
    

      

     还可以重新对弹出层定位,也可以解决,但是其它弹出层的位置也会受影响,还有其它小问题

    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateY(0) translateX(-50%);
    

      

  • 相关阅读:
    Hibernate(十三)迫切内连接fetch
    SQL多表联合查询(交叉连接,内连接,外连接)
    Hibernate入门(十二)离线条件检索
    Java基础IO流(二)字节流小案例
    Java基础IO流(一)
    Hibernate入门(十一)多对多案例
    mysql下载安装及常见问题
    数据库表数据恢复
    linux的自有(内置)服务
    linux下的别名机制
  • 原文地址:https://www.cnblogs.com/wuhefeng/p/12613473.html
Copyright © 2011-2022 走看看