标签: mobile-webkit
Android/Mobile Webkit CSS背景 - 附件:修复不起作用？
我只是疯了,或背景附件:固定; 真的不适用于原生Android浏览器？
我已经通过使用两个div而不是一个来实现一个简单的修复...第一个div绝对定位并包含固定的背景图像,另一个div位于它之上并包含滚动内容.
这个修复的问题(除了不必要的复杂化)是由于某种原因,当我在背景图像div上滚动内容时,背景图像完全消失!:(
有没有其他人找到一个没有错误的解决方法,或者我们应该如何使用它？
推荐指数
解决办法
查看次数
iOS 11 WebKit iframe错误的解决方法
iOS WebKit iframe错误描述
iOS WebKit将iframe的大小调整为其内容的完整大小(见下图).这是一个自2016年以来已知的错误,但仍未在iOS 11中解决:https://bugs.webkit.org/show_bug.cgi？id = 155198
我目前的发现
1.对于固定的iframe内容(例如视频)
它足以在下面应用CSS,但它可以防止iframe内容滚动.
.fixed iframe {
width: 0;
height: 0;
min-width: 100%;
min-height: 100%;
}
2.对于可滚动的iframe内容(例如页面)
- 我们需要两个iframe容器:一个作为边界(固定大小),第二个作为滚动区域.
- 要适合iframe内容,其div容器必须以像素为单位定义w/h.任何相对度量(如%,vw/vh)都不起作用.
一些RWD页面(假设"不完整的RWD")正在经历iframe溢出(iframe不适合iframe容器).不幸的是,我们无法从iframe中解决这个问题并解决此问题,iframe中的文档至少需要:
Run Code Online (Sandbox Code Playgroud)body { max-width: 100vw !important; }或者,我们可以将iframe内容缩放为最后的手段.
因为2,为了保持容器比例,我们至少需要使用CSS媒体查询或JS来调整其高度.
一些不完整的解决方案:
- https://github.com/ampproject/amphtml/issues/11133
- https://www.spacevatican.org/2015/4/7/on-mobile-safari-and-iframes/
- Bootstrap Popover内容中的外部HTML文件
- 如何让IFrame在iOS Safari中响应？
- iFrame高度自动(CSS)
- iframe会根据内容自动调整高度而不使用滚动条？
- iframe滚动iOS 8
- iOS8 Safari -webkit-overflow-scrolling:touch; 问题
我的解决方法发布在答案中.
推荐指数
解决办法
查看次数
使用Viewport创建适合移动设备的版本
我正在网站上工作,但我想要一个适合移动设备的版本.我是新手.
有人建议我应该使用下面的代码,我在这里找不到很多相关的问题:
<meta name="viewport" content="width=320, initial-scale=1">
问题是我不知道如何实现它,我知道不能简单地转换整个页面.
我要求的是关于如何实现目标的一些指示.
推荐指数
解决办法
查看次数
Android 2.3浏览器无法渲染一些CSS3 2D变换
我在使用任何使用默认webkit引擎的浏览器(例如默认浏览器,Dolphin HD,亚马逊Kindle Fire Silk浏览器等)中使用CSS3 2D Transforms在Android 2.3中工作时遇到了麻烦.Android 2.3 webkit引擎确实支持2D变换,我已经能够让一些2D变换的网站正确渲染,而不是我的网站!
有没有人知道Android 2.3中可能导致与2D变换冲突的任何问题？或者,有没有一种很好的方法来使用Android 2.3 webkit渲染引擎来定位浏览器的css？当我使用Modernizr时,在这种情况下它不起作用,因为Android 2.3浏览器测试2D变换是正面的.
这是我的网站:http://StevenGerner.com.在首页上,我正在旋转两个元素-90deg(网站标题和一个h2元素),并且都不会在Android 2.3浏览器上旋转.我甚至尝试过其他的css变换,但似乎没有任何改变.如果我将整个页面剥离到基本,那么转换工作完美无缺,所以我的网站上可能还有其他冲突,我只是无法弄清楚是什么!这是特定于变换的CSS:
//Applied to the h2 element which says 'howdy' at the top of the page
#about-front h2 {
display: inline-block;
float: left;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 170% 170%;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 170% 170%;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 170% 170%;
-o-transform: rotate(-90deg);
-o-transform-origin: 170% 170%;
transform: rotate(-90deg);
transform-origin: 170% 170%;
width: 1em;
text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 …推荐指数
解决办法
查看次数
-webkit-overflow-scrolling打破绝对定位
我正在构建一个页面,当它们以其他方式滚动离开屏幕时,需要有一些元素粘在页面顶部.我成功地使用了这个position:absolute.一切都很完美,但它需要动力滚动.我添加-webkit-overflow-scrolling: touch到可滚动区域的CSS中.这打破了一切.我的粘性元素position:absolute现在只是滚动其余的内容.
我的问题是:
为什么-webkit-overflow-scrolling: touch影响绝对定位,有没有办法绕过这个？
更新:每当子元素变为"固定"或"未固定"时,我都会添加警报.警报继续触发,因此样式仍在应用,它只是不起作用.这意味着跟踪滚动位置不是问题,而是样式问题.
更新:我尝试使用position: fixed,而不是position: absolute和-webkit-overflow-scrolling打破了太
更新:经过大量挖掘,我在这里和这里找到了对这个问题的引用.但是,两种情况下唯一提出的解决方案是重构DOM,以便粘性元素不在可滚动区域中.在我的情况下,这是一件很难的事情,我宁愿不必这样做.自ios5以来有没有进展或者仍然是唯一的选择？
推荐指数
解决办法
查看次数
在某些CSS属性发生更改之前,DOM-Elements存在但不可见
我正在为Webapp创建一个复杂的原型(我使用Cordova将它部署到我的iPhone),我遇到了以下问题:
DOM-Elements(不是使用JavaScript创建,而是在静态HTML文件中直接创建)存在(它们在检查器中以正确的大小显示)但不可见.有时它们根本没有被显示,有时它们被部分显示,有时它们的一部分被显示在不同的位置.检查员总是在正确的位置显示他们的"身体".
有一个奇怪的解决方案:只要在加载一侧后更改CSS属性(例如取消选中并检查检查器中任何元素的任何属性 - 有时以编程方式更改属性也有效),它们就会正确显示.问题出现在Safari和Chrome中,但不是在Firefox中(可能是Webkit问题？).这在Safari Mobile中是最糟糕的(我需要它才能最有效).
首先使用transform: translate3d(0);hack帮助,但现在不再使用了 - 我正在使用和动画大量的Flexbox元素.我只是在浏览器中要求很多？
编辑:问题似乎只有在我在一个容器中滚动后才会发生.滚动后某些(完全不相关)元素消失.
推荐指数
解决办法
查看次数
如何在"ios contenteditable element"中恢复格式文本后的平滑滚动？
我想在#ios上的"contenteditable element"中编辑内容.在那个元素是更多的文字.
脚步
- 我顺利滚动到所选文本
- 我触摸元素和打开键盘
- 我触摸并选择多行文本并将其格式化为粗体
- 我现在想要滚动内容,但它不再流畅
这是可播放的代码:https:
//console.webcloud.io/profile/bruno.onlyme@gmail.com/_playwithcode/contenteditable-scroll-after-format/index.html
视频预览在这里.
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
body {
font-size: 24px;
}
</style>
</head>
<body>
<button>button</button> | <a onclick="console.log();">anchor</a><br>
<br>
<div contenteditable>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type …推荐指数
解决办法
查看次数
内联表单字段:jQuery-Mobile中的搜索框和按钮
这就是我想要实现的目标:
这就是我得到的:
请使用web-kit浏览器(Chrome或Safari)查看JSFiddle:http://jsfiddle.net/KqEqN/
当你缩小屏幕时会发生这种情况,但按钮的空间仍然足够明显.我已经看过CSS试图找到按钮右侧的某种填充但不能.还有水平线来自哪里？
推荐指数
解决办法
查看次数
移动浏览器上的本机JSON对象支持
我想使用JSON.stringify和JSON.parse在移动浏览器上做一些工作,例如iOS上的移动safari和Android上的Webkit浏览器以及两个平台上的WebView.我想知道兼容性.
PS:我测试了Android 2.1和iOS 3.2上的功能,他们都支持.
推荐指数
解决办法
查看次数
为什么 100vh 会使 div 比 Safari for iOS 中的可见区域更高？
我正在设计一个移动网页。该页面有一个覆盖div层height: 100vw;。
在 iOS 上，它占据的高度超出了工具栏的 628 像素（请参见下面的屏幕截图），但在控制台上window.innerHeight返回的值较小，为 553 像素。
为什么？
另外，如何通过CSS使其成为可见区域的大小？
推荐指数
解决办法
查看次数