Tag: css

我如何避免在iPad上的可拖动边框半径元素上的animation制品？: 我已经写了一个可以在触摸设备上拖动的元素的示例页面（基于Peter-Paul Koch的代码）。我的示例页面我有两个可拖动的<div>元素：一个绿色的块和一个红色的球（球形的border-radius ）。拖动是通过ontouchstart ， ontouchmove和ontouchend ，“animation”是通过改变这些元素的top和left CSS属性来完成的。当我拖着绿色的，都是玫瑰和马驹。但是，当我在iPad 1（运行iOS 5.1.1）或iPad 3（6.0.1）的Safari上拖动红色的Safari时，我会在圆圈的后边缘（见下面的屏幕截图）获得浅红色的小道。但是，我并没有在iPhone 5（6.1.4）上看到这些path。有没有办法摆脱这些痕迹？（奖金问题：是否有这个效果？“重影”？“神器”？）

元视口标签似乎完全忽略或没有效果: 我已经把这个标签放在网页的头部： <meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1"> 出于某种原因，它似乎只是我的iPhone上被忽略，甚至添加user-scalable=no没有影响。我已经尝试了许多宽度，初始尺寸等值…似乎没有任何效果。有谁知道可能是什么原因造成的？在源头上我可以清楚地看到它在标题中。我的iPhone在iOS7上。编辑：问题仍然发生在iOS6与Xcode ios模拟器，所以我不认为这是由于iOS7。

iOS Phonegap多行文字select错误？: 我正在创build一个PhoneGap应用程序，要求用户在p元素内select文本，然后将修改它的文本“复制”到我的需要。然而，在p标签内select文本存在一个问题。从我的服务器中检索文本，输出如下所示： <p style="white-space:pre-wrap">Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus […]

iOS 9.x中的embedded式Facebook浏览器错误的视口/页面高度: 使用iOS 9.x（至less）的Facebook应用程序中的embedded式浏览器从core-layout打开演示应用程序时，当设备处于纵向模式时，页脚元素不可见。如果将设备旋转到横向模式，页脚将部分可见。但是，页脚（带button）应该完全可见。第一张图片显示了演示应用程序的外观，第二张图片显示了如何使用Facebook应用程序的embedded式Web视图查看演示应用程序缺less页脚（图像是从Chrome桌面浏览器获取的，说明了该错误是如何体现的）：在testing了很多不同的假设之后，我们得出结论，这个错误是由于浏览器使得页面/视口高于可见区域而造成的。这个bug似乎与iOS9的Safari浏览器问题有关，meta不能正确缩放？网页在iOS 8上的Twitter应用程序中没有达到100％的高度。

CSS背景延伸到填充iOS的高度，但滚动上有空白: 这个CSS得到我的背景填充在iOS的100％的屏幕高度，但有一个小问题 – 当你向下滚动最初是空白，然后当你松开你的手指，并停止滚动背景图像“调整”，并填充100屏幕高度的百分比再次。如果您继续滚动，只是第一次，问题不会重新出现在同一页面上。有人可以帮忙吗？谢谢 #background { background: url(../img/background.jpg) center repeat-x; position: fixed; background-size: auto 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: -1 }

防止在iOS上溢出/橡皮筋滚动: SO上的溢出/橡皮圈滚动的话题已经有多个问题了他们都没有提供适用于iOS 9.3.2的所有情况的解决scheme 他们都没有提供关于问题本身的广泛和完整的信息这就是为什么我把这篇文章作为一个知识体。问题：在其他文章中从未提及过的事情是，iOS溢出滚动实际上是两部分行为。 1.溢出的内容溢出滚动overflow: auto/scroll 这是使用-webkit-overflow-scrolling: touch的元素的通常已知且最常见的行为，其中连续/动量滚动行为越过元素容器以平滑地减慢滚动的内容。当你滚动一个元素的内容时，会发生这种情况，这个元素的动量足以让动量滚动超过滚动内容的长度。有了这个行为， element.scrollTop属性相应地改变元素的滚动位置，并且小于0或大于最大滚动（ element.scrollHeight – element.offsetHeight ）。 2.溢出滚动<body> 如果您尝试滚动任何元素的最小/最大滚动位置甚至更远（顶部向上的元素或底部向下的元素），则会发生此行为。然后滚动似乎“冒泡”到<body>标签，整个视口滚动。与上面相反， element.scrollTop属性不改变，但是document.body.scrollTop改变。焦点locking和行为之间切换（1.5秒延迟）在这种情况下最令人烦恼的是，上述两种types之间的切换不能即时切换。 input其中一个后，您无法将焦点切换到任何其他元素（可滚动元素，button，链接，…），从而滚动行为也不会改变。例如：如果你向上滚动一个元素到顶部位置，inputoverflow scrolling type 2 ，那么用户最自然的反应就是试着向下滚动。由于焦点被locking到滚动体而不是overflow scrolling type 1所以它停留在type 2 ，整个身体向下滚动。然后典型的用户开始任意地开始频繁地上下滚动而不会中断type 2 。焦点的切换以及滚动行为的改变只能在溢出animation结束并且元素静止（甚至比0.5s更长）的时候才会发生。从而回到前面的例子，用户的正确反应是停止触摸屏幕大约1秒-1.5秒，然后再次向下滚动。

如何修复Safari的iOS 10.3.1中的HTML保证金底部错误: 我注意到，在iOS 10.3.1中，当使用safari并激活虚拟键盘时，可以一直向上滚动页面，并在html元素和虚拟键盘之间留出空的空间（与body相同的颜色）。你可以看到蓝色区域是检查员认为的html元素，在虚拟键盘和html之间有一个白色的空白（或者黑色，如果我把身体背景设置为黑色）。请注意，这个差距不会自动出现。出现键盘时，必须向上滚动。我注意到这一点，因为我使用JavaScript来做一个滚动到底部修复中国9button键盘（它将覆盖屏幕的底部，这恰好是textarea）的错误。

iOS暗灰色盒子主动式: 当在移动Safari浏览器中触摸链接或任何带有onclick事件的内容时，元素上会出现一个深灰色框。这是什么叫，什么CSSselect器可以用来摆脱它。谢谢！

在iOS设备上设置原生HTML5date和时间select器的宽度: 我正在使用types=date和types=时间的原生date和时间select器，用于我正在处理的网站的移动版本。虽然input字段不尊重我的CSS。桌面： iOS设备：基本上我需要两个date和时间input来填充〜50％的宽度。这是我正在使用的HTML和CSS： <div class="arriveWrapper"> <div class="arriveDateWrapper fieldWrapper"> <input class="arriveDate" name="arriveDate" type="date" placeholder="What date?" /> </div> <div class="arriveTimeWrapper fieldWrapper"> <input class="arriveTime" name="arriveTime" type="time" placeholder="What time?" /> </div> <div class="clear"></div> </div> .arriveDateWrapper { width: 49%; margin-right: 2%; float: left; position: relative; } .arriveDate { width: 100%; height: 28px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: […]

html5inputtypes数字与移动正则expression式模式: 我试图得到正则expression式在inputtypesnumber只显示数字和点。我尝试了这样的事情 <input type="number" pattern="[0-9.]*"> <input type="tel"> 两者都只显示数字（0-9），但不显示。（点）。我需要在input字段中使用点。是否有可能通过HTML5？或者我应该用javascript？注意：这在Android中工作正常，但是。（点）不显示在iPhone中我需要像这样显示手机键盘有关于此的任何帮助？