Tag: 浏览器的WebKit
HTML5占位符的CSS填充
我已经看到这个post，并试图尽我所能改变我的占位符的填充，但唉，似乎只是不想合作。 无论如何，这里是CSS的代码。 （ 编辑 ：这是从sass生成的CSS） #search { margin-top: 1px; display: inline; float: left; margin-left: 10px; margin-right: 10px; width: 220px; } #search form { position: relative; } #search input { padding: 0 10px 0 29px; color: #555555; border: none; background: url('http://img.dovov.combg_searchbar.png?1296191141') no-repeat; width: 180px; height: 29px; overflow: hidden; } #search input:hover { color: #00ccff; background-position: 0px […]
加载css3过渡animation？
有没有可能使用页面加载CSS3转换animation，而不使用JavaScript？ 这是我想要的，但在页面加载： http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 我到目前为止发现的 CSS3转换延迟 ，一种延迟对元素的影响的方法。 只适用于hover。 CSS3的关键帧 ，负载工作，但速度非常缓慢。 没有用，因为这一点。 CSS3过渡足够快，但不要在页面加载时animation。
CSS3连续旋转animation（就像加载日</s>）
我想通过使用PNG和CSS3animation复制一个苹果风格的活动指标（日loading加载图标）。 我有图像旋转和连续进行，但animation完成之前似乎有一个延迟，然后再进行下一个旋转。 @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #loading img { -webkit-animation-name: rotate; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-transition-timing-function: linear; } 我试图改变animation的持续时间，但它没有区别，如果你慢下来说5秒更明显的是，第一次旋转之后有一个暂停再次旋转。 这是我想摆脱的这个停顿。 任何帮助非常感谢，谢谢。
打印预览中不显示背景颜色
我正在尝试打印一个页面。 在那个页面上，我给了一个表格一个背景颜色。 当我在chrome中查看打印预览时，它不会考虑背景颜色属性… 所以我尝试了这个属性： -webkit-print-color-adjust: exact; 但仍然没有显示颜色。 http://jsfiddle.net/TbrtD/ .vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } <div class="bs-docs-example" id="soTable" style="padding-top: 10px;"> <table class="table" style="margin-bottom: 0px;"> <thead> <tr class="vendorListHeading" style=""> <th>Date</th> <th>PO Number</th> <th>Term</th> <th>Tax</th> <th>Quote Number</th> <th>Status</th> <th>Account Mgr</th> <th>Shipping Method</th> <th>Shipping Account</th> <th style="width: 184px;">QA</th> <th id="referenceSO">Reference</th> <th id="referenceSO" style="width: 146px;">End-User Name</th> <th […]
Chrome webkit inspector中不断产生“不安全的JavaScript尝试访问带有URL的帧…”错误
Chrome（或任何其他webkit浏览器）在使用Facebook API时会抛出大量这样的“不安全的JavaScript尝试访问带有URL的帧…”。 它不会干扰实际操作，但它确实使JavaScript控制台基本无法使用。 我想知道是否有一种方法来抑制这些错误，特别是在控制台？ 或者，如果有其他解决scheme，你们可以想到，我真的很感激它。 谢谢。
防止WebKit / Blink中的MacOS轨迹板用户隐藏滚动条
Mac OS X自10.7（Mac OS X Lion）以来，WebKit / Blink的（Safari / Chrome）默认行为是在不使用轨迹板用户时隐藏滚动条。 这可能会令人困惑 ; 滚动条通常是元素可滚动的唯一可视提示。 示例（ jsfiddle ） HTML <div class="frame"> Foo<br /> Bar<br /> Baz<br /> Help I'm trapped in an HTML factory! </div> CSS .frame { overflow-y: auto; border: 1px solid black; height: 3em; width: 10em; line-height: 1em; } WebKit（Chrome）截图 Presto（Opera）截图 我如何强制滚动条始终显示在WebKit的可滚动元素？
Javascript / Chrome – 如何从webkit检查器复制对象作为代码
我正在做一个console.log语句在我的JavaScript为了logging一个javascript对象。 我想知道是否有办法，一旦完成 – 将该对象作为JavaScript代码复制。 我想要做的是转换一个使用Ajax创build的对象来parsing一个XML feed到一个静态的JavaScript对象，以便一个文件可以在本地运行，没有服务器。 我已经在铬检查器窗口中包含了对象的屏幕截图，以便您可以看到我正在尝试执行的操作。
以编程方式更改animation规则中的webkit转换值
我有这个样式表： @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,1620px,0px); } } 不是我想修改1620px的值取决于一些参数。 喜欢这个： @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px, height*i, 0px); } } 我宁愿能够使用JavaScript和jQuery，虽然一个纯CSS的解决scheme可以。 这是一个运行在它的移动Safari浏览器的iPhone游戏。
Webkit和jQuery可拖动跳跃
作为一个实验，我创build了几个div，并使用CSS3旋转它们。 .items { position: absolute; cursor: pointer; background: #FFC400; -moz-box-shadow: 0px 0px 2px #E39900; -webkit-box-shadow: 1px 1px 2px #E39900; box-shadow: 0px 0px 2px #E39900; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } 然后我随机devise了它们，并通过jQuery使它们可拖动。 $('.items').each(function() { $(this).css({ top: (80 * Math.random()) + '%', left: (80 * Math.random()) + '%', width: (100 + 200 * Math.random()) + 'px', […]
具有渐变的CSS3animation
是否真的没有办法用CSSanimation渐变背景？ 就像是： @-webkit-keyframes pulse { 0% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 50% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 100% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } } 我知道，Safari 5.1+和Chrome 10+有一个新的渐变语法，但现在，我必须坚持使用旧的这个项目。
