Tag: webkit

有条件地阻止移动safari中的滚动/触摸移动事件: iOS 5现在允许本机溢出：滚动支持。我想要做的是禁用touchmove事件除了具有’scrollable’类或其子元素的元素之外的所有内容。但我似乎无法让它发挥作用; 这是我一直在下面工作的： .scrollable { height: 5em; overflow-y: scroll; -webkit-overflow-scrolling: touch; } // doesn’t seem to work var handleMove = function (e) { if (!$(e.target).parents().andSelf().hasClass(‘scrollable’)) { e.preventDefault(); } }; document.addEventListener(‘touchmove’, handleMove, true); don’t scroll if you drag here should be scrollable if you drag here and here and here and here and here […]

jQuery为WebKit（chrome）和Firefox中的相同对象返回不同的高度: 我被这个困惑了。 jQuery.height（）在Firefox和Chrome中返回不同的值。测量屏幕上的像素表示两者中的一个，Chrome似乎报告了正确的值，而firefox每次关闭2或3个像素。还有其他人遇到过这个问题吗？我尝试使用各种jQuery高度函数（innerHeight，outerHeight，height）来获取高度无济于事。我已经剥离了所有可能干扰高度值的css样式（所有填充，边框，边距等），但我仍然得到不一致的结果。如果它有帮助，我正在处理表格单元格。代码在第一个表旁创建第二个表，然后匹配每行的高度以在表上创建一种“粘性”左侧列。单元格具有不同的内容，但在所有边上匹配边界，填充和边距的0值。编辑 6小时后，这个问题继续困扰我。当我修改边框并切换到使用innerHeight（）来获得高度测量时，两个浏览器都会完美地渲染它。但我需要在那里找到一个底线… 目前我有webkit完美地渲染带有边框的表格，并且每个单元格上的firefox关闭了1px。我转而使用jQuery的innerHeight（）函数来获取’master’表格中单元格的高度，但不知何故，firefox总是在测量时出现一个像素。这是涉及的相关代码。请注意，HTML是由firebug复制的，后者是由javascript生成的，所以在那里进行高度声明。 ‘master’表格HTML： 70609 R1000 Armoire Casegoods 70634 C1124 Nightstand Casegoods 70642 999 Nice Table New Name Casegoods 70643 OC603 Coffee Table Casegoods 70644 OC606 Coffee Table Casegoods 辅助表格HTML： Sent 2 days ago $90.00 Sent […]

通过Javascript检测文档标题的更改: 有没有办法通过Javascript检测对document.title / head > title的更改？我希望通过Google Chrome扩展程序内容脚本检测到这一点，因此我无法在目标页面的JS中实际连接执行标题更改的代码。我发现WebKitMutationObserver理论上应该能够检测到head > title的更改，但它并不适用于所有情况： // set up an observer for the title element var target = document.querySelector(‘title’); var observer = new WebKitMutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation); }); }); var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); // this jQuery statement fires the observer as […]

jQuery $ .css（）函数无法正确解释“动画延迟”（在webkit浏览器中！）: 编辑 – 链接错误的codepen 这似乎只发生在webkit浏览器中。在Firefox中它的工作原理。在IE中，添加了正确的内联样式，但它没有添加前缀（即使我在javascript中指定’ms-animation-delay’而不仅仅是’animation-delay’ 我正在玩一个试图复制一些Google Material效果的codepen（我知道它们在聚合物中有它们，我只是想尝试复制一些效果以获得乐趣）。由于一些奇怪的原因，jQuery错误地将“animation：[value]”放入内联样式而不是“animation-delay：[value]”。任何人都可以解释为什么以及如何解决这个问题？这是codepen：链接 JS： $(document).ready(function(){ var lis = $(“li”), str; for(var x=2; x<= lis.length; x++){ str=(0.2+ 0.1*(x-2))+"s"; lis.eq(x-1).css({"animation-delay": str}); } }); 转换延迟也会发生这种情况。

JQuery – 如何在基于WebKit的浏览器（chrome / safari）中将对象追加到iframe？: 我有这个代码： $(document).ready(function() { $(“#iframeId”).contents().find(“body”).append($(“#test”)); }); Text 我需要将整个对象追加到iframe（不仅仅是html（））。它在IE，Firefox和Opera中运行良好，但我无法在Chrome / Safari中实现。有没有hack或其他方法，如何将html对象放入iframe，使用WebKit？编辑我无法克隆该对象（或使用其内部Html），因为我需要将其与文件输入一起使用，并且由于安全限制我无法复制它。

在同步“Ajax”请求之前强制在Webkit（Safari和Chrome）中重新绘制UI: 在一个简单的基于Ajax的网站中，我们正在同步地发出一些HttpRequests请求（我意识到“同步Ajax”在某种程度上是矛盾的）。这是同步和异步完成的主要原因是为了简化一些参与者的编程模型（长篇大论）。无论如何，我们希望能够在发出请求之前进行样式更改（特别是在Google搜索时使用半透明白色覆盖屏幕），然后在结果返回时将其删除。基本上这看起来像： load:function(url) { …. busyMask.className=”Shown”; //display=block; absolute positioned full screen semi-transparent var dta=$.ajax({type:”GET”,dataType:”json”,url:url,async: false}).responseText; busyMask.className=”Hidden”; //sets display=none; … return JSON.parse(dta); } 众所周知，同步请求将锁定UI。所以毫不奇怪，白色叠加层从未出现在Safari和Chrome中（有趣的是在Firefox中）。我已经尝试减慢响应方式并使用粉红色叠加层，这样很明显，但它只是在请求完成之后才会更新UI。离开’busyMask.className =“Hidden”’部分会显示掩码 – 但只有在ajax请求完成后才会显示。我已经看到许多强制UI重绘的技巧（例如，为什么HourGlass不能在Google Chrome中使用同步AJAX请求？， http ： //ajaxian.com/archives/forcing-a-ui-redraw-from-javascript ），但它们似乎都与试图显示实际的“永久”DOM或样式更新有关，而不是在发出同步请求时暂时显示样式更改。那么有没有办法做到这一点，还是我正在打一场失败的战斗？可能我们只需要根据具体情况切换到异步请求，以处理性能最差的请求，这可能是解决学习曲线问题的一种不错的方法……但我希望有一个外部的方框在这里回答。

cqu动画播放后jquery删除类？: 我有css代码： body.start{-webkit-animation:srcb ease-in .4s 1;} 进入网站时只玩一次但问题是动画完成的时候我网站上的按钮不起作用如何在完成动画后删除body类“start” 或者在播放动画后删除课程延迟x秒？

在Webkit浏览器上使用jQuery读取和设置z-index值: jQuery(“#X”).css(“z-index”); 始终在Webkit浏览器上返回“auto”。在Firefox上运行正常。看来你也不能用以下的东西来设置z-index： jQuery(“#X”).css(“z-index”,5); 测试用例如下： jQuery CSS Z-index Fail $(document).ready(function(){ $(“#X”).css(“z-index”,5); $(“#Y”).append($(“#X”).css(“z-index”)); }); h1 {z-index: 3;} Some Text Z-index is:

如果在基于Webkit的浏览器中未移动指针，则鼠标光标不会更改: 我们假设我们有简单的jQuery代码，如下所示： var $document = $(document); $document.ready(function() { var $test = $(“#test”); $document.keydown(function(e) { e.shiftKey && $test.css(“cursor”, “pointer”); }); }); 问题是如果鼠标指针移过#test块，WebKit不会更改#test块鼠标光标，然后按下Shift键。但是一旦移动光标，Chrome和Safari就会将光标样式更改为pointer – 完全符合预期但不移动鼠标。这个bug（？）与Firefox无关，我没有在Internet Explorer和Opera下检查它… 那么，有没有人遇到同样的麻烦？也许，有没有解决方法呢？提前致谢。

如何在$（document）.ready（）中始终获得包含图像的DIV的高度（仅限Webkit中的问题）: 我有这个片段来演示这个问题： height query demo Demo of querying height The source code of this document has a DIV prior to the H1. The DIV contains a subdiv which in turn contains an image. Using jQuery’s $(document).ready, the following processing takes place: DIV queried for its height DIV detached from the document height value written out here: […]