草庐IT

webkit-animation

全部标签

iphone - 浏览器渲染右边距 iPhone/iPad/webkit

我在下面有一个html片段,它可以在所有浏览器中完美呈现。然而,在iPhone和iPad上的webkit中,当我捏住页面(使其变小)时,我看到一个黑色边框,它是主体的背景颜色,仅在右边缘发光。只有当我指定.headerpicdiv的宽度时才会发生这种情况。由于这是我指定宽度的文档中唯一的地方,我想知道为什么它一直没有渲染到右边缘(因为这在理论上是文档中最宽的部分?)。我附上了一张它在我的ipad上的照片。body{background-color:#000;color:#231f20;margin:0;}#wrapper{background-color:#fff;min-height

jquery - 如何测试移动 webkit

我想建立一个新网站,并希望采取负责任的“移动优先”方法。这种方法的一个原则是只加载您需要的内容,并避免包含大量浪费的库和框架,直到您真正需要它们为止。为此我打算使用modernizr2测试功能,然后仅加载所需的文件和库。在javascript方面,我真的很想使用像zepto.js(http://zeptojs.com/)这样的东西,它是一个针对移动webkit(和单独的移动webkit)优化的小型javascript库(2-5k),同时维护一个jquery兼容的语法。它也被设计为可与完整的jquery进行“热交换”。所以我的策略是(伪代码):测试移动webkit如果(真)加载zepto

javascript - HTML + Canvas : Constellation background animation

我一直想为我的网站实现移动星座背景。这是我想要实现的效果的示例:图像没有显示,但那些星座在不断移动。我从:https://www.nuclino.com/顺便说一下,这个网站很棒。所以这是我的问题:如何使用CSS动画/过渡来实现这种效果?CSS过渡只允许我在动画的每一步指定位置。有没有这个效果的JS库? 最佳答案 给你:http://codepen.io/JulianLaval/pen/KpLXOO///particle.min.jshostedonGitHub//Scrolldownforinitialisationcode!fu

html - 防止溢出 : hidden (webkit) 在父级中滚动超大子级

我对Webkit浏览器有疑问。当我将光标聚焦到时会发生此问题元素并开始移动鼠标而不松开按钮。这是一个截屏视频-http://screencast.com/t/P1BnT7ZAdc这是一个html/css演示-http://napokrovke.mysundays.net/webkit_bug.html如何防止这种行为? 最佳答案 这不是一个错误,它是因为你已经将wrapper设置为300px,并对其应用了hidden的overflow属性,这允许你在内容大于你定义的300px时滚动,我在OSX上的firefox,我还可以在其中滚动。

javascript - 移动Webkit和Hammer JS上的多个元素响应触摸事件

我正在使用HammerJS库开发一个小型副项目,我在ChromeDevTools模拟器和两台iOS7设备上调试时遇到了问题。它似乎在桌面浏览器上运行良好。在这里fiddle:http://jsfiddle.net/w80baz5g/5/更多信息如下。我有一组元素,像这样:和HammerJS监听点击事件:functioninitItems(el){varitemToTap=newHammer.Manager(el,itemOptions);itemToTap.add(newHammer.Tap());itemToTap.on("tap",function(event){console.l

javascript - 一直使用持续时间为 0 的 .animate 可以吗?有更好的选择吗?

我已经习惯了通过执行以下操作来编写我的jquery动画。使用css或javascript设置元素的初始状态(例如宽度、高度、顶部、左侧、不透明度等...)。此初始状态是动画结束时的状态。使用持续时间为0的.animate将元素移动到元素处于动画开始时的状态。使用具有适当持续时间的常规.animate来制作动画,在动画结束时,元素返回到步骤1中的状态。这是一个例子。/*cssfile*/.animatedObject{width:60%;}//javascriptfile$('.animatedObject').animate({width:'-=20%'},0).animate({wi

jquery - 复杂的 Webkit 错误?相对位置 + Z-Index + 溢出隐藏 + CSS3 变换

与其他现代浏览器相比,下面的代码(JSFiddlePreview)在Webkit中产生了意想不到的结果:jQuery(document).ready(function($){RunFunction();$('.ColorSquare').click(function(){$('#Lightbox').css('display','block');$('#ShowColorSquare').css('display','block');$('#ShowColorSquare').css('z-index','10');$('#ShowColorSquare').css('left',$(

html - 我们可以从单个节点中删除 CSS 属性“-webkit-scrollbar”吗?

如何从单个HTML元素中删除CSS属性::-webkit-scrollbar?在我的CSS文件中,我有这段代码:::-webkit-scrollbar{width:6px;height:6px;background-color:transparent;}::-webkit-scrollbar-track{background-color:transparent;width:6px;}::-webkit-scrollbar-track-piece{background-color:blue;}::-webkit-scrollbar-thumb{background-color:#d4de

css - WebKit 中 <input required ...> 的样式

请在Chrome浏览器中查看此示例:http://jsfiddle.net/ymzTB/当您将输入留空并单击enter时,您将收到如下消息:请填写此字段。看起来不错。如何在WebKit和其他浏览器中设置此消息的样式,例如,将背景颜色替换为红色,或者将字体颜色或大小设置为其他颜色? 最佳答案 您可以使用以下pseudoclasses:::-webkit-validation-bubble{}::-webkit-validation-bubble-top-outer-arrow{}::-webkit-validation-bubble-

css - 用于输入元素的 webkit htm5 css 重置

这有点烦人。看起来webkit(通过chrome13canary)在设计各种输入类型的样式方面做得很好,并且在很大程度上与设计发生冲突。尤其是,这些让我很头疼:选定的元素发光(通过轮廓)placeholder=文本样式聚焦的文本区域和输入字段周围有丑陋的光芒我正在使用样板和modernizr。带有占位符的简单input[type=search]会覆盖文本样式。我知道你可以通过input::-webkit-input-placeholder但是,这似乎无法设置诸如text-shadow之类的样式-这有点废话。有谁知道这是否可能是一个会被修复的错误,或者我是否需要退回到javascript