首页 > 其他分享 >a-textarea(textarea)出现模糊问题的可能解决方案

a-textarea(textarea)出现模糊问题的可能解决方案

时间:2024-04-24 18:11:43浏览次数:21  
标签:textarea 解决方案 模糊 transform 滚动条 iframe border

a-textarea(textarea)出现模糊问题的可能解决方案

项目介绍:本项目是一个vue3+ant-design-vue4.x开发,是一个客服机器人的组件。其它项目通过iframe+js文件来引入(iframe的内容就是表单,入口按钮是通过js文件进行dom操作创建)。

通过js监听页面宽度,然后通过transform来适配不同分辨率。

iframe+transform,出bug似乎也不奇怪~

这期间也因为transform出现过模糊bug,但这篇文章的重点是textarea。

大致的情况如图:

![](file://C:\Users\wangyf86\AppData\Roaming\marktext\images\2024-04-24-17-47-36-image.png?msec=1713952056881)

在出现滚动条的时候,表单变得非常模糊。

而没有滚动条的时候:
![](file://C:\Users\wangyf86\AppData\Roaming\marktext\images\2024-04-24-17-48-06-image.png?msec=1713952086267)

页面就又恢复了清晰。

猜测原因:textarea本身高度不可控,chrome内核的浏览器在某些情况下(比如本项目的iframe+transform+滚动条+textarea边框)计算错误。用firefox浏览器显示是正确的。

解决方法:

textarea {
    border-radius: 0px;
}

这一行就让表单不模糊了。虽然解决方案只有一条,但这一条也是蒙出来的。

这个时候样式会变得很丑,也许你可以考虑给它的父元素加一点样式。

下面是我随便写的,同样很丑:

<a-form-item :label="$t('issueDescription')" name="note" class="form-description">
      <a-textarea
        v-model:value="formState.note"
        :placeholder="$t('inputPlaceholder')"
        :auto-size="{ minRows: 5, maxRows: 5 }"
      />
</a-form-item>
.form-description :deep(.ant-form-item-control-input-content) {
  border-width: 1px;
  border-style: solid;
  border-color: white;
  border-radius: 6px;
  textarea {
    border-radius: 0px;
  }
}

这个方法可能不适用于你的项目,对我来说也是玄学。如果有大佬知道具体原因,求指点~

标签:textarea,解决方案,模糊,transform,滚动条,iframe,border
From: https://www.cnblogs.com/m1pha/p/18156062

相关文章

  • 关于ESLint: Delete `␍`(prettier/prettier) 错误解决方案(3种)
    1.点击VSCode右下角LF/CRLF然后根据弹窗修改成LF即可2.在.eslintrc.cjs中增加配置"rules":{"prettier/prettier":["error",{"endOfLine":"auto"}]}3.关闭git自动转换这个问题是因为Windows在换行的时候,同时使用了回车符CR和换行符LF,即CRLF;而项目仓库中默认是Linux环......
  • macOS配置Clion用于STM32开发找不到stdint.h等头文件问题解决方案
    问题编译工程时发现出现大量类似错误如下/opt/homebrew/Cellar/arm-none-eabi-gcc/13.2.0/lib/gcc/arm-none-eabi/13.2.0/include/stdint.h:9:16:fatalerror:stdint.h:Nosuchfileordirectory问题原因不能使用brewinstallarm-none-eabi-gcc安装编译工具链[1]解决方......
  • corona渲染器锐化模糊设置,corona高效出图方法
    在使用Corona渲染器进行效果图渲染时,锐化和模糊是两种常用的设置,它们主要用于调整图像的清晰度和柔化效果。锐化参数可以增强图像中的细节,使画面看起来更加清晰锋利;而模糊参数则可以用来柔化图像边缘,减少图像噪点,使整体视觉效果更为柔和。用户如果能够掌握这些参数的使用原理,便可......
  • 新版chrome浏览器“已阻止不安全的下载”解决方案
    解决方法一:针对所有网址,适用于Chrome122+版本:在Chrome地址栏输入:chrome://settings/content/insecureContent点击添加,输入[*.]com,再次点击添加,刷新页面即可如果你需要访问的网站是.cn结尾的,就添加[*.]cn,其他的网站亦是同理 解决方法二:(针对指定网址,目前测试各个Chrome......
  • node环境axios(AxiosError: Parse Error: Invalid header value char)解决方案
    最近在做一个electron项目时,需要在node环境使用axios请求,我试图向API发出请求,但我得到了这个错误:AxiosError:ParseError:Invalidheadervaluechar问题在于API返回的响应头中的值包含不允许的字符。Node.js的HTTP解析器比Web浏览器使用的解析器更严格,这可以防止抓取服务......
  • initialize方法重定向无限循环问题解决方案
    由于在initialize方法中进行重定向而造成的重定向循环。当session('?user_id')检查失败时,你的代码会尝试重定向到登录页面。如果登录页面或者处理登录的控制器也继承自同一个基类(或者有类似的initialize检查),这将导致每次尝试访问登录页面时都会再次执行重定向,从而陷入无限循......
  • 什么是最优物理隔离文件导出导入解决方案,来看看吧!
    企业进行物理隔离的主要原因是为了提高安全性,减少安全风险。物理隔离通常指的是将网络或系统中的关键部分与外界断开直接连接,以增强安全性。在企业环境中,这通常意味着将内部网络(内网)与外部网络(如互联网,即外网)隔离开来,防止未授权的访问和潜在的网络攻击。物理隔离文件导出通常涉及......
  • mybatisplus分页中,模糊匹配一个字符串在列a或者列b下都可以筛选出的写法
    话不多说,直接上代码,and那句就对了LambdaQueryWrapper<类>wrapper=newLambdaQueryWrapper<类>().in(逻辑内容).like(正常逻辑内容).and(wrapperNew->wrapperNew.like(StringUtils.isNotEmpty(filter.getLocation()),......
  • 光学雨量计:高精度测量降水量的理想解决方案
    光学雨量计:高精度测量降水量的理想解决方案河北稳控科技光学雨量计是一种高精度测量降水量的理想解决方案。它利用光学原理,通过光束的衰减来测量降雨强度和累积降水量。相比传统的雨量计,光学雨量计具有更高的精度和可靠性,成为现代气象观测的重要工具。 传统的雨量计通过测量......
  • 关于Windows 10 LTSC 2019无法安装Edge的解决方案
    最近新换了Windows10LTSC2019系统,使用体验干净且流畅,但是在更新Edge时遇到了问题:系统内装的是9x版本的Edge浏览器,并且提示更新错误,有systemlevel方面的问题,查询多方后,最终在MicrosoftCommunity中找到了解决方案,在任意地方创建一个名为edge.reg的注册表文件,具体名称随意,然后用......