javascript - 在iPhone的textarea和输入字段中看不到输入的文本(cannot see inputted text in textarea and input fields on iPhone)

Question

I am working on the following site:

(我正在以下站点上工作：)

http://www.jpdgallery.com/

(http://www.jpdgallery.com/)

When you click the hamburger icon in the bottom right corner, a contact form slides over.

(当您单击右下角的汉堡包图标时，联系表单就会滑过。)

On chrome on my macbook, the input and textarea fields work fine--in both regular and in mobile view.

(在我的Macbook上的Chrome上，无论在常规视图还是在移动视图中，input和textarea字段都可以正常工作。)

When I deploy this, and test it on an iphone in chrome and safari in mobile or chrome, I cannot see the text as I am typing.

(当我部署它并在chrome上的iphone上以及在mobile或chrome中的safari上对其进行测试时，我在键入时看不到文本。)

I know that it is still typing though because I receive the text in the form submission.

(我知道它仍在输入，因为我收到了表单提交中的文本。)

Because I cannot replicate in development environment, I am having trouble figuring out how to troubleshoot.

(由于我无法在开发环境中进行复制，因此我无法确定如何进行故障排除。)

Thanks for any assistance you can provide.

(多谢您提供的协助。)

I have pasted the html and all the CSS which applies to the input elements as extracted from Safari inspector view.

(我已经粘贴了html和所有适用于从Safari检查器视图中提取的输入元素的CSS。)

 Style Attribute { } #first_3, #last_3, #input_4, #input_5 { font-size: 1.3rem !important; height: 3.3rem !important; } #first_3, #last_3, #input_4, #input_5 { -webkit-appearance: none; } button, input { overflow: visible; } button, input, optgroup, select, textarea { margin: 0; font-family: inherit; line-height: inherit; } html * { -webkit-font-smoothing: antialiased; } *, ::after, ::before { box-sizing: border-box; } * { -webkit-user-select: none; } * { padding: 0; } input, input:matches([type="password"], [type="search"]) { color: text; background-color: -webkit-control-background; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: inset; border-right-style: inset; border-bottom-style: inset; border-left-style: inset; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; -webkit-rtl-ordering: logical; cursor: auto; } input, textarea, keygen, select, button { font-style: normal; font-weight: 400; font-variant-caps: normal; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; } input, textarea, keygen, select, button, meter, progress { writing-mode: horizontal-tb; } ol, ul { list-style: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } ul, menu, dir { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; } .cd-nav .cd-navigation-wrapper { height: 100%; overflow-y: auto; padding: 40px 5% 40px calc(5% + 40px); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: -webkit-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); } .navigation-is-open .cd-nav { visibility: visible; -webkit-transition: visibility 0s 0s; transition: visibility 0s 0s; } .cd-nav { position: fixed; z-index: 2000; top: 0; left: 0; height: 100%; width: 100%; background-color: #243040; -webkit-transition: visibility 0s 0.7s; transition: visibility 0s 0.7s; } body { margin: 0; background-color: #fff; } body { background-color: #ffffff; } html, body, .container2 { width: 100% !important; height: 100%; /* max-height: 100%; */ margin: 0; padding: 0; } body { background-color: whitesmoke !important; width: 100%; margin: 0; display: flex; flex-direction: column; align-content: center; align-items: center; flex: 0 1 auto; } :root { --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } html { display: block; } *, ::after, ::before { box-sizing: border-box; } *, ::after, ::before { box-sizing: border-box; } 

  <form class="jotform-form" action="https://submit.jotform.us/submit/0000000000/" method="post" name="form_00000000000" id="93267152447158" accept-charset="utf-8"> <h2>Contact / Order Request Form</h2> <nav class="postform-fields"> <ul class="cd-primary-nav slide-over-form"> <li>First Name</li> <input type="text" id="first_3" name="q3_name[first]" data-component="first" /> <li>Last Name</li> <input type="text" id="last_3" name="q3_name[last]" data-component="last" /> <li>Email</li> <input type="email" id="input_4" name="q4_email" data-component="email" /> <li>Note</li> <textarea id="input_5" name="q5_typeA" data-component="textarea"></textarea> <div> <button id="input_2" type="submit" class="btn btn-dark form-submit-button" data-component="button">SUBMIT </button> </div> </ul> <div class="cd-half-block"> <address> <ul class="cd-contact-info"> <li><a href="mailto:[email protected]">info@[domain].com</a></li> <li>[555]-[555]-9211</li> <li> <span>VermontUSA</span> </li> </ul> </address> <!-- .cd-half-block --> </div> <!-- .cd-navigation-wrapper --> </nav> </form> 

  ask by Jake Durell translate from so

Answer 1

Have you tried assigning a specific font-size and perhaps add some padding?

(您是否尝试过分配特定的字体大小并可能添加一些填充？)

I tried the page on iOS Safari and yes, the inputs don't show text, but they are also extremely tiny.

(我在iOS Safari上尝试了该页面，是的，输入不显示文本，但是它们也很小。)

My theory is that either the font-size is incorrectly inherited from your rule font-size: inherit;

(我的理论是，要么font-size被错误地继承自您的规则font-size: inherit;)

or it just gets hidden because of the size of the input.

(或由于输入的大小而被隐藏。)

Try making the inputs bigger and define an explicit font-size, try with font-size: 1rem .

(尝试使输入更大，并定义一个显式的font-size，并尝试使用font-size: 1rem 。)

You should check this article on REM vs EM vs PX in order to better define sizes.

(您应该查看REM vs EM vs PX上的这篇文章 ，以便更好地定义尺寸。)

I checked in console and your inputs have a font-size: 10px inherited on Desktop Chrome.

(我在控制台中签到，您输入的font-size: 10px是在Chrome浏览器上继承的。)

EDIT

(编辑)

You can also try experimenting with the input's height.

(您也可以尝试尝试输入的高度。)

Try adding height: 2rem .

(尝试增加height: 2rem 。)

Another issue could be that normally mobile browsers have a different behavior for inputs.

(另一个问题可能是，通常移动浏览器的输入行为不同。)

You could try adding this to your inputs definition:

(您可以尝试将其添加到输入定义中：)

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

Also, your pure-js-slider.css : line 2 adds a strange rule that might be interfering with all the elements' behavior, try commenting this one or at least removing the user-select: none part:

(另外，您的pure-js-slider.css : line 2添加了一条奇怪的规则，该规则可能会干扰所有元素的行为，请尝试对此注释或至少删除user-select: none部分：)

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

I also managed to add some characters, but look how it appears.

(我还设法添加了一些字符，但看起来如何显示。)

The yellow ones were from phone information auto complete and the mail one I managed to write m, but the rest of the letters didn't appear.

(黄色的是自动完成的电话信息和我设法写的一封邮件m，但其余的字母没有出现。)