相关疑难解决方法(0)

当固定元素获得焦点时,ios8中的Safari是滚动屏幕

在IOS8 Safari中,有一个新的位置修复错误.

如果您聚焦固定面板中的文本区域,Safari会将您滚动到页面底部.

这使得所有类型的UI都无法使用,因为您无法将文本输入textareas而无需将页面一直向下滚动并丢失位置.

有没有办法干净地解决这个bug?

#a {
  height: 10000px;
  background: linear-gradient(red, blue);
}
#b {
  position: fixed;
  bottom: 20px;
  left: 10%;
  width: 100%;
  height: 300px;
}

textarea {
   width: 80%;
   height: 300px;
}
Run Code Online (Sandbox Code Playgroud)
<html>
   <body>
   <div id="a"></div>
   <div id="b"><textarea></textarea></div>
   </body>
</html>
Run Code Online (Sandbox Code Playgroud)

javascript css safari ios ios8

91
推荐指数
4
解决办法
6万
查看次数

在Mobile Safari中打开虚拟键盘时,如何阻止我的固定导航像这样移动?

据我所知,移动safari在固定元素周围有很多错误,但在大多数情况下,我已经设法让我的布局正常工作,直到我在底部的固定导航中添加了一个非常需要的文本输入.现在,当用户关注文本输入元素并出现虚拟键盘时,我的导航(否则始终固定在页面底部)会跳到页面中间的一个非常奇怪的位置.

在此输入图像描述

我会在这篇文章中添加一些代码,但我不确定从哪里开始.导航固定在底部,位于左侧和底部0,宽度为100%.从那里,我不知道发生了什么,我只能假设它是一个移动的safari bug.

只有当文本输入元素被聚焦并且虚拟键盘打开时,它似乎也会失去它的位置固定并变得相对.

css mobile position mobile-safari ios

48
推荐指数
3
解决办法
6万
查看次数

位置差异:粘性和位置:固定?

由于我是CSS的新手,因此很难理解文档.那么有人可以解释position:sticky和之间的实际区别position:fixed吗?我也很感激一个例子.

我已经浏览了https://developer.mozilla.org/en-US/docs/Web/CSS/position和其他一些文章,但我仍然没有得到它.

html css layout position

37
推荐指数
4
解决办法
2万
查看次数

在Safari Mobile 10.3粘性页脚可以在屏幕上滚动

我们的移动网络应用程序具有粘性底部导航功能,就像您在iOS应用程序中经常发现的那样,在Safari 10.3 仅在横向上发布后,可以在屏幕上滚动粘性导航(页脚).虽然它已经position: fixed设置bottom: 0并且在旧的Safari版本上也是不可能的.

粘性导航/页脚的样式如下:

footer {
  position: fixed;
  height: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.7);
}
Run Code Online (Sandbox Code Playgroud)

DEMO试试手机

在纵向模式下,它始终可见:

人像模式

在横向模式下,您可以在屏幕上滚动显示顶部地址栏的大小:

在此输入图像描述

有人遇到过这样的问题吗?我将不胜感激任何帮助使页脚留在屏幕上.谢谢

html css mobile mobile-safari ios

29
推荐指数
2
解决办法
6245
查看次数

标签 统计

css ×4

ios ×3

html ×2

mobile ×2

mobile-safari ×2

position ×2

ios8 ×1

javascript ×1

layout ×1

safari ×1