Tag: 浏览器的WebKit

什么是正确的“-moz-appearance”值来隐藏<select>元素的下拉箭头

我试图使用CSS对<select>元素的下拉箭头进行样式化,它在Chrome / Safari中完美工作: select { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url('./select-arrow1.png') ; background-position: center right; background-repeat: no-repeat; border: 1px solid #AAA; margin: 0; padding-top: 2px; padding-bottom: 2px; width: 200px; } 在这里看到的精美呈现 通过这个逻辑,我必须做的唯一事情就是把所有的-webkit-*东西join到Firefox中: -moz-appearance: button; -moz-border-radius: 2px; -moz-box-shadow: 0px 1px 3px rgba(0, […]

如何使用JavaScriptdynamic设置样式-webkit-transform?

我想dynamic地使用JavaScript来更改-webkit-transform: rotate()属性。 但是常用的setAttribute不起作用: img.setAttribute('-webkit-transform', 'rotate(60deg)'); .style不起作用 我怎样才能在JavaScript中dynamic设置? 我知道你们之前有过处理这方面的经验。

如何在CSS转换期间防止Webkit文本呈现更改

我正在使用CSS转换在CSS转换状态之间转换(基本上转换元素的缩放比例)。 我注意到,当元素正在转换时,页面上的其他文本(在Webkit中)往往略微改变其渲染,直到转换完成。 小提琴: http : //jsfiddle.net/russelluresti/UeNFK/ 我也注意到这不会发生在我的头上,它们上面有-webkit-font-smoothing: antialiased属性/值对。 所以,我想知道,是否有任何方法让文本保持其默认外观(字体平滑的“自动”值),而不会改变过渡期间的渲染。 我已经尝试明确地设置文本使用“自动”值,但是这并没有做任何事情。 我还应该注意,将字体平滑设置为“无”也可以防止在转换期间呈现闪烁。 任何帮助表示赞赏。 编辑1 我应该注意到我在OS X上。在Parallels的Chrome上testing我的testing时,我没有看到两个不同的段落有不同的performance,所以这可能是Mac专有的问题。

固定元素在Chrome中消失

在我build立的网站上滚动时,使用CSS属性position: fixed按预期工作,使导航栏保持在页面的最顶端。 但是,在Chrome中,如果使用导航栏中的链接,它有时会消失。 通常,您点击的项目仍然可见,但并非总是如此。 有时整个事情消失。 移动鼠标可以返回元素的一部分,只需点击一下鼠标就可以滚动滚轮或方向键。 你可以在http://nikeplusphp.org上看到它的发生(intermitently) – 你可能需要点击几个导航链接几次才能看到它发生。 我也尝试玩z-index和可见性/显示types,但没有运气。 我遇到了这个问题,但修复程序根本不适用于我。 似乎是一个webkit的问题,因为IE和Firefox工作得很好。 这是一个已知的问题,还是有修复,保持固定的元素可见? 更新: 只影响有top: 0;元素top: 0; ,我试过了bottom: 0; 并按预期工作。

具有多个属性的CSS过渡速记?

我似乎无法find具有多个属性的CSS过渡速记正确的语法。 这不会做任何事情: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { height: 200px; opacity: 1; } 我用javascript添加了show class。 元素变得更高和可见,它只是不转换。 在最新的Chrome,FF和Safari中进行testing。 我究竟做错了什么? 编辑:只是要清楚,我正在寻找速记版本缩放我的CSS。 它充满了所有供应商的前缀。 还扩展了示例代码。

什么是WebKit,它是如何与CSS相关的?

最近,我已经看到标签“webkit”的问题。 这样的问题通常倾向于与CSS,jQuery,布局,跨浏览器兼容性问题等有关的基于Web的问题。 那么这个“webkit”是什么?它与CSS有什么关系? 我也注意到各种网站的源代码中有很多-webkit-…属性。 这两个有关系吗? 更新 所以从目前的答案… WebKit是Safari / Chrome的HTML / CSS网页浏览器渲染引擎。 IE / Opera / Firefox是否有这样的引擎,以及使用其他引擎的优缺点有哪些? 我可以在Firefox中使用WebKitfunction吗? 最终的问题是IE支持WebKit吗? 更新2 所有主stream浏览器都使用不同的渲染引擎。 我想这是为什么有这么多的跨浏览器兼容性问题的一个重要原因! 那么,是否有某种项目或移动到所有浏览器将使用的标准渲染引擎? HTML5是否会结束跨浏览器兼容性问题?

WebKit:模糊的文本与CSS规模+ translate3d

Chrome浏览器和其他WebKit浏览器大量模糊了也应用了translate3d的任何CSS缩放内容。 这是一个JS小提琴: http : //jsfiddle.net/5f6Wg/ 。 (在Chrome中查看) .test { -webkit-transform: translate3d(0px, 100px, 0px); } .testInner { /*-webkit-transform: scale(1.2);*/ -webkit-transform: scale3d(1.2, 1.2, 1); text-align: center; } <div class="test"> <div class="testInner"> This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied. </div> </div> 有没有已知的解决方法呢? 在上面这个简单的例子中,我可以简单地使用translate而不是translate3d – 这里的要点是将代码剥离到最基本的地方。

Facebook如何在浏览器地址栏中重写页面的源URL?

转到http://www.facebook.com/facebook?v=wall ,然后单击信息选项卡。 内容将被加载,地址栏现在变成http://www.facebook.com/facebook?v=info,但网页没有重新加载。 起初我认为这是Ajax,但我的问题是,如何更改地址栏而不重新加载? 我知道我可以改变锚(#墙)使用JS,但querystring(?V =墙),如何?

使用Javascript加载图片时,iPad / iPhone浏览器崩溃

我正在尝试在Safari中构build一个模仿iPad照片应用程序的图库。 它完美的工作,除了一旦我加载超过6MB左右的图像或者通过将它们添加到DOM或创build新的图像对象,新的图像要么停止加载或浏览器崩溃。 这个问题已经足够普及了(其他人都碰到同样的限制),我排除了我的Javascript代码作为罪魁祸首。 考虑到您可以在元素或浏览器内的媒体播放器中传输多于几MB的内容,这种限制似乎是不必要的,应该有一些解决方法可用。 也许通过释放内存或其他东西。 我也遇到了这个UIWebView的参考 。 “JavaScript的分配也被限制在10 MB,如果你超过JavaScript的总内存分配限制,Safari会引发exception。 这与我所见相当相符。 是否有可能在Javascript中释放对象,还是Safari / UIWebView保持运行总量,永不放弃? 另外,是否有任何解决方法来加载数据的另一种方式,不吃这个10MB?

如何通过JavaScript重新触发WebKit CSSanimation?

所以,我有这个-webkit-animation规则: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } 还有一些CSS在我的box上定义了一些animation规则: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } 我可以像这样shake #box : document.getElementById("box").style.webkitAnimationName = "shake"; 但是我以后再也不能动摇了。 这只能震动一次: someElem.onclick = function(){ document.getElementById("box").style.webkitAnimationName = "shake"; } 如何通过JavaScript重新触发CSSanimation而不使用超时或多animation?