Tag: css3

iPad 2 Safari显示像素化的HTML文本和图像

我们正在为iPad和iPhone开发HTML5 + CSS3应用程序。 该应用程序在iPad和所有iPhone上运行良好，但是，iPad 2在启动时显示html dom对象，并且保持这种状态，有时总是有时停留一会儿。 应用程序是专为触摸和手势。 我们使用translate3D进行滚动对象的硬件加速。 我们也使用jQuery（v1.7），但我们devise的滚动是纯粹的JavaScript，没有框架。 jQuery主要用于查找/添加/删除dom对象和ajax。 除jQuery之外，其他所有东西都是内部编写的，包括我们正在使用的jQuery插件。 正如我所说，animation是通过translate3D来实现的。 对于滑动效果，我们正在改变-webkit转换的x或y轴值，并且当接收到touchend事件时，通过javascript，-webkit-transition和translate3D实现动量animation。 在编写应用程序时，苹果的iOS Safari文档被高度用作指南。 即使这款应用在iPad，iPod Touch（第二代），iPhone 3gs和iPhone 4上运行良好，但在iPad 2上进行testing时，我们却开始看到这个像素化的屏幕。 最奇怪的部分是，3D加速内容是获得像素化的唯一部分。 我附上了两个截图，一个来自iPad，另一个来自iPad2。 你可以看到我的意思（他们是在同一天的不同时间，所以内容是不同的，对此感到抱歉）。 主要内容（包含图像的框）可以通过触摸事件上下滑动。 在iPad2上，只有这部分是像素化的。 在滑动时，像素化保持大部分时间，但在某些testing中，几秒钟后会重置。 另外，html的内容有这样的一行： <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 我们通过CSS开始硬件加速，主滑动对象具有这个属性： -webkit-transform: translate3d(0,0,0); 为了防止闪烁，图像不在任何具有背景颜色的dom对象中，并具有以下属性： -webkit-backface-visibility: hidden; 对于某些情况下的更多闪烁校正，我们使用了这个属性（但屏幕截图中的像素化内容没有分配这个属性）： -webkit-perspective: 0; 该应用程序目前没有“apple-touch-startup-image”，所以我们首先想到的是，启动捕获ios使得不知所措。 但事实certificate，这不是问题，因为在通过wi-fi下载内容之后，像素化保持不变。 如果有人遇到这个或类似的问题，并能解决它，请回答，因为我们没有其他的想法了。 我尽可能地提供了尽可能多的信息，下面是我所做的截图： iPad： iPad 2：

iOS禁用页面使用溢出滚动进行滚动：触摸

所以我们假设我们想让一个web应用程序感觉像一个本地应用程序，并且具有“添加到主屏幕”的function。 其中的第一步是禁用默认的滚动。 很简单，对吧？ // window or document window.addEventListener("touchmove", function(event) { // no more scrolling event.preventDefault(); }, false); 这一切都很好，直到你添加overflow-scrolling的混合。 确切地说，在iOS上，它将是-webkit-overflow-scrolling: touch 。 /* #scrollable happens to be a ul */ #scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; } 通过添加事件防护，硬件加速滚动容器不起作用，显然不是预期的效果。 明显的解决scheme看起来像这样： // you could do this for multiple elements, of course var scrollable = document.querySelector("#scrollable"); scrollable.addEventListener("touchmove", function(event) { […]

hover行为在桌面与iPad上

我已经build立了一个使用纯CSS和:hover伪类来显示菜单的菜单。 我在iPad上testing了这个行为，发现hover并没有消失 – 甚至没有点击其他地方。 我已经在网上search解决scheme，但找不到任何有用的东西。 当我点击iPad上的其他位置时，有没有办法让hover消失？

纯css3视差和移动

我正在使用transform3D来实现纯CSS视差效果。 我在这里有一个非常混乱的演示设置： http : //codepen.io/anon/pen/nGAvw 这是翻译的主要代码： transform: translateZ(-1px) scale(2); z-index: -1; transform-style: preserve-3d; 我希望我的parallaxed图像使用溢出剪辑：隐藏。 这在桌面版Chrome / Safari上正常工作，但在Mobile Safari上停止工作。 从我的进一步实验，它在Android上工作正常，但停止在iOS7上工作。 任何想法如何解决这个问题？ 有没有办法在iOS上剪辑翻译的对象？

基于触摸设备的下拉菜单

我在我的网站上有这个导航栏，它不会在我的iPod touch上下拉，我怀疑iPhones和iPad也是如此。 这是其中的一页 我想知道是否有任何快速修复启用触摸/hover。 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。 有没有办法摆脱这些痕迹？ （奖金问题：是否有这个效果？“重影”？“神器”？）

如何将div设置为“visibility：hidden”，如果它们在视口之外

我正在开发移动networking应用程序。 但是，iOS 5.1或更低版本的Safari浏览器内存有限。 当我使用css3转换时，我需要最小化内存使用情况。 我发现，如果我使用CSS样式“显示：无/知名度：隐藏”，该应用程序不会因内存问题而崩溃。 所以我想让这个东西“隐藏”，当他们真正隐藏起来的时候。 我的英语不好。 图片可以显示我想要的： 上传的图片**：** 另一个例子是一个网站使用的CSS“知名度：隐藏”属性隐藏每一个会议，当它不在屏幕上： 示例网站：电通networking

在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: […]

修复了iOS中某个网站（div）的背景

我想有一个固定的位置背景图像，只覆盖整个屏幕的一部分我的网站（实际上是两个部分，但独立，所以没有区别）。 我在该部分的容器DIV上使用此CSS： #wrapper { background-image: url(../img/bg1_IMG_1509.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } （注意：我使用的是单独的属性，而不是简单的background希望这可以与更多的设备和浏览器兼容，但似乎不是这样。） 这在所有的桌面和浏览器中，以及在android上的一些浏览器上或多或less地工作，但在iOS中完全不起作用。 在iOS中，背景不仅被滚动，而且还被垂直拉伸，使得背景图像的高度覆盖整个DIV，其在移动设备上具有很多内容并变得相当高，导致看到更多或在屏幕上放弃的像素更less。 所以，既不fixed也不cover工作。 我知道/已经阅读了iOS的固定位置解决scheme的答案，该解决scheme在<body>标签中使用了position: fixed的DIV和全屏背景图片。 但是我不想在整个机构上这样做，而只是在两个（独立的）部分，在这种情况下，解决方法是不能使用的。

禁用iPhone“保存图像”popup

我试图禁用iPhone /任何iOS设备上显示的“保存图像”对话框。 当用户在Safari中时，他们可以将手指放在图像上，然后将图像直接保存到手机中。 他们的方式来打开这个菜单与JavaScript，jQuery的，或CSS？ 我环顾了其他职位，似乎没有太多关于这个话题。 我发现一个职位，但答案似乎并没有工作。 我看到了一种使用隐形div的方法，但是如果可以用jQuery或者javascript来完成，我不会这样做。 谢谢