输入在用户开始输入时收缩 [英] Input shrinks when user starts typing

查看：103
本文介绍了输入在用户开始输入时收缩的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网站上的联系人字段只要用户在移动设备上开始输入时就会缩小。我无法在任何尺寸的桌面浏览器窗口中检测到此行为。

contactfield由相对新的 css网格 $ b


$ b

如何重新创建错误：


  1. 打开我的<您的移动设备上的网站

  2. 向下滚动至输入字段
    3. >
  3. 重点关注并开始输入





我已经尝试过通过对输入应用宽度和 min-width 来解决它，但是这并没有解决它。



我在电子表格中收集了关于不同浏览器和设备的信息，以查明错误是否出现。

https://docs.google.com/spreadsheets/d/1D3_7zh8u2MFAx5vt_mKCA9bjEI9crdDwwOSlucLLwfM/edit？ USP =沙皮我认为这可能是一个浏览器的bug，因为 css grid 是比较新的？！你能够重新创建错误吗？除了删除 css网格并使用 flexbox ？

构建它之外，您是否有任何想法>

我想尝试让浏览器公司收到通知，看看是否是浏览器错误，以便他们能够修复它...



/ *我实际上使用SCSS，所以这段代码不会运行* // * grid * /。grid__form {display：grid ;网格模板列：50％50％; grid-template-areas：name emailtextarea textareafeedback submit; grid-gap：10px; @media screen和（max-width：500px）{grid-template-columns：100％; grid-template-areas：feedbacknameemailtextareasubmit;} / *联系表格* /。contact {grid-area：contact; margin-bottom：100px; & __ header {font-size：500;颜色：$ text-dark-primary; font-size：2rem; text-align：center;保证金：0 0 30px 0; @media screen和（max-width：500px）{font-size：1.5rem; }& - link {text-decoration：none;颜色：rgba（$ color-secondary-400,0.87）;光标：指针;过渡：$ transition-standard; @media屏幕和（最大宽度：359px）{font-size：1.3rem; }&：hover {text-decoration：underline; }}}& __ input {font-family：'Roboto'，'Noto Sans'，sans-serif;行高：1.5; font-size：1rem;填充：0.5em; border：2px solid rgba（black，0.20）; border-radius：2px;宽度：100％;最小宽度：100％;颜色：$ text-dark-primary;背景颜色：白色;光标：文本;概要：无;过渡：$ transition-standard; & - name {grid-area：name; }& - email {grid-area：email; }& - textarea {grid-area：textarea;调整大小：无; min-height：250px; }&：focus {border：2px solid $ color-secondary-200;宽度：100％;最小宽度：100％; }}& __ submit {font-family：'Roboto'，'Noto Sans'，sans-serif;行高：1.5;网格区域：提交; justify-self：end; }& __ feedback {grid-area：feedback; align-self：center;保证金：0; font-size：1rem; font-weight：500; }}

< form class =contact_form grid__formaction =_ assets / php / sendMail.phpmethod =POSTnovalidate> < input id =nameclass =contact__input contact__input - nametype =textname =nameplaceholder =Name/> < input id =emailclass =contact__input contact__input - emailtype =emailname =emailplaceholder =Email/>