草庐IT

javascript - 元素在输入焦点上随机消失 - Safari IOS

coder 2024-01-22 原文

我遇到了与此问题 (iOS 8.3 fixed HTML element disappears on input focus) 中所述类似的情况，但我的问题有所不同。我在可滚动的父级中有一个聊天框 iframe。当 iframe 打开时，它会扩展以填满整个视口(viewport)。

<body>
    <!-- PARENT PAGE CONTENT -->

    <div class="webchat-container"> 
        <div class="webchat-header-container">blah blah chat</div>

        <!-- Iframe contains a reply bar with a text input with fixed positioning to the bottom -->
        <iframe src="chatapp"/>     
    </div>
</body>

.webchat-c​​ontainer 有一组基本的移动样式:

.webchat-container {
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0;
    z-index: 50;
    transition: height 300ms ease-in-out;
    -webkit-transform: translate3d(0px,0px,0px);
    transform: translate3d(0px,0px,0px);
}

打开时，.webchat-c​​ontainer 会获得此附加样式:

.webchat-container.open {
    height: 100%;
}

关于回复栏中文本输入的焦点，子 iframe 使用 postMessage() 让父知道输入有焦点，所以我可以应用一些专门用于 ios 设备的类来处理 ios 处理固定的不幸方式定位。

我将一个 .no-scroll 类添加到父级的正文中:

body.no-scroll {   
    position: fixed !important;
    top: 0;
    bottom: 0; 
}

和一个包含 iframe 的响应式容器的类:

.webchat-container.ios-positioning.open {    
    position: absolute !important;
    overflow: hidden;
    top: 0 !important;
    bottom: 0 !important;
}

输入聚焦时会出现闪烁，但除此之外，这达到了预期的效果......软键盘向上滑动，回复栏位于键盘上方它应该在的位置。聊天小部件也仍然正确地填充 100% 的视口(viewport)，看不到父级或奇怪的缩放或居中错误。

现在的问题....

如果我点击完成关闭键盘然后再次聚焦输入，.webchat-c​​ontainer 有时会变得不可见，只有闪烁的光标可见(这就是我知道元素仍然存在并位于正确位置的方式).如果我在 Safari 中检查元素，元素的蓝色突出显示也表明它在正确的位置，但只是不可见/透明。这些类也正确地应用于元素和从元素中删除。

我尝试过缓慢、快速、不规则地关闭和重新聚焦键盘，有时它会正确重绘，有时则不会。它似乎是随机的。我也试过通过触发焦点动画来强制重绘......不起作用。所以我什至不知道这是否是一个惰性重绘问题。

iframe 中包含的聊天应用程序在前端是 React，在后端是 C# 和 asp.net。

如果有人知道是什么导致了这种间歇性的元素不可见，甚至更好，如果有任何关于如何解决这个问题的想法，我将非常感激。 IOS 和它的各种怪癖让我烦恼了好几天，这是我还没有解决的最后一个问题。

最佳答案

这似乎与 iOS 在输入获得焦点时放大有关。

一旦我打开覆盖元素(包含输入所在的 iframe)，我设法通过将 position: fixed; 设置为 body 元素来修复它。将位置设置为 fixed 也可以防止滚动底层元素。

关于javascript - 元素在输入焦点上随机消失 - Safari IOS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43386803/

javascriptSafaricodesectionwebchatioscssmobile-safari

有关javascript - 元素在输入焦点上随机消失 - Safari IOS的更多相关文章

  1. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  2. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  3. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  4. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  5. ruby-on-rails - environment.rb 中设置的常量在开发模式中消失 - 2

    了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在，如果我运行script/server并发出请求，一切都很好。然而，在我的Rails应用程序的第二个请求中，一切都因单元化常量错误而变得糟糕。在生产模式下，我可以成功发出第二个请求，这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl

  6. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  7. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

  10. ruby - 使用 Nokogiri 和 Ruby 命名元素 "text" - 2

    我在尝试使用Nokogiri构建XML文档时遇到了一个小问题。我想将我的元素之一称为“文本”(请参阅​​下面粘贴代码的最底部)。通常，要创建一个新元素，我会执行类似以下的操作xml.text--但它似乎是.text是Nokogiri已经用来做其他事情的方法。因此，当我写这行时xml.textNokogiri没有创建名为的新元素但只是写了意味着成为元素内容的文本。我怎样才能让Nokogiri实际制作一个名为的元素？？builder=Nokogiri::XML::Builder.newdo|xml|xml.TEI("xmlns"=>"http://www.tei-c.org/ns/1.0"

随机推荐