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？