- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
与其他现代浏览器相比,下面的代码 ( JSFiddle Preview ) 在 Webkit 中产生了意想不到的结果:
<script type="text/javascript">
jQuery(document).ready(function($) {
RunFunction();
$('.ColorSquare').click(function() {
$('#Lightbox').css('display','block');
$('#ShowColorSquare').css('display','block');
$('#ShowColorSquare').css('z-index','10');
$('#ShowColorSquare').css('left',$('#ShowColorSquare').parent().width() / 2 - 50);
$('#ShowColorSquare').css('top',$('#ShowColorSquare').parent().height() / 2 - 50);
$('#ShowColorSquare').html('The color is: ' + $(this).css('background-color'));
});
$('#ShowColorSquare').click(function() {
$('#Lightbox').css('display','none');
$('#ShowColorSquare').css('display','none');
$('#ShowColorSquare').html('');
});
$('#Lightbox').click(function() {
$('#Lightbox').css('display','none');
$('#ShowColorSquare').css('display','none');
$('#ShowColorSquare').html('');
});
});
function RunFunction() {
$('#slide1').animate({
left: '-=310'
}, 3000);
$('#slide2').animate({
left: '-=310'
}, 3000);
$('#slide3').animate({
left: '-=310'
}, 3000, function() {
if($('#slide1').css("left") == '-310px') {
$('#slide1').css("left",620);
}
if($('#slide2').css("left") == '-310px') {
$('#slide2').css("left",620);
}
if($('#slide3').css("left") == '-310px') {
$('#slide3').css("left",620);
}
RunFunction();
});
}
</script>
<style>
#Spin {
width:50px;
height:50px;
margin: 15px 0px 15px 15px;
background-color:#960;
animation-name:Spin;
animation-duration:5s;
transform-origin:50% 50%;
animation-iteration-count:infinite;
-webkit-animation-name:Spin;
-webkit-animation-duration:5s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count:infinite;
}
@keyframes Spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes Spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.ColorSquare {
height:100px;
width:100px;
position:absolute;
}
#ShowColorSquare {
height:100px;
width:100px;
position:absolute;
background-color:white;
display:none;
}
#Lightbox {
background-color:#000;
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
opacity:.8;
display:none;
z-index:5;
}
.Panel {
width:225px;
height:250px;
position:absolute;
background-color:#6C6C6C;
}
</style>
<div id="Spin"></div>
<div style="height:260px;width:500px;overflow-x:hidden;background:#CCC;">
<div style="height:250px;width:500px;position:relative;">
<div id="slide1" class="Panel" style="top:0px;left:0px;">
<div>Slide 1</div>
<div style="position:relative;margin-top:10px;width:225px;height:200px;">
<div class="ColorSquare" style="background-color:#093;left:0px;top:0px;"></div>
<div class="ColorSquare" style="background-color:#C9F;left:100px;top:100px;"></div>
</div>
</div>
<div id="slide2" class="Panel" style="top:0px;left:310px;">
<div>Slide 2</div>
<div style="position:relative;margin-top:10px;width:225px;height:200px;">
<div class="ColorSquare" style="background-color:#CF9;left:0px;top:0px;"></div>
<div class="ColorSquare" style="background-color:#C63;left:100px;top:100px;"></div>
</div>
</div>
<div id="slide3" class="Panel" style="top:0px;left:620px;">
<div>Slide 3</div>
<div style="position:relative;margin-top:10px;width:225px;height:200px;">
<div class="ColorSquare" style="background-color:#696;left:0px;top:0px;"></div>
<div class="ColorSquare" style="background-color:#F96;left:100px;top:100px;"></div>
</div>
</div>
<div id="ShowColorSquare"></div>
</div>
</div>
<div id="Lightbox"></div>
预期结果:它应该有 3 个 DIV(幻灯片)在一个循环中连续向左动画,包括幻灯片中的相关彩色框。如果您单击一个彩色框,则会显示一个灯箱,其中包含在相关幻灯片中单击的彩色框的 RBG 颜色。再次单击以关闭灯箱。同时在浅灰色父 DIV 之前应用 3D 转换,相对位置 overflow hidden ,Jquery 在绝对定位幻灯片 DIV 上设置动画。
Webkit 中的结果:幻灯片中的彩色框似乎根本不会移动/呈现,直到您在桌面上调整浏览器窗口的大小,或在平板电脑上单击 JSFiddle 面板调整大小 handle (或捏/缩放)。在不同的调试说明中,如果 3D 转换动画没有循环,当动画停止时,DIV 会按预期呈现。
显示 Webkit 错误的测试结果:
注意 ( JSFiddle Preview ) 在没有 3D 变换的情况下,代码可以工作,尽管动画在桌面上不流畅。灯箱工作正常。
请注意 ( JSFiddle Preview ) 在父 DIV 之后进行 3D 变换,动画很流畅,灯箱工作正常。
注意 ( JSFiddle Preview ) -webkit-transform: rotate(0deg) 应用到父 DIV 并溢出,动画在平板电脑上不稳定,但 3D 变换可以存在于父 DIV 或在幻灯片 DIV 中。但是又产生了另一个问题。父溢出 DIV 的 z-index 低于灯箱,使深色灯箱 DIV 出现在父 DIV 内的白色对话框 DIV 上方。
我知道这是一个非常奇怪的例子,但它是一个更私密的复杂代码的淡化例子。 3D 变换必须在父 DIV 之前,或在幻灯片中。灯箱对话框必须在父 DIV 或幻灯片中,但出现在深色灯箱 DIV 上方,不能在父 DIV 内,因为隐藏的溢出不会使深色灯箱 DIV 显示整个浏览器屏幕。
感谢任何帮助。
最佳答案
如果您阅读了 Chrome 中的 GPU 加速合成 http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome你会发现 renderLayer 在以下情况下会获得它自己的合成层:
当您添加或删除 3D 变换时,您会得到不同的结果,因为代码要么通过 GPU 加速路径,要么通过软件渲染路径。 GPU 加速路径对您拥有的 GPU/驱动程序非常敏感,如果您看到任何奇怪的图形故障,您应该检查的第一件事是当您在 chrome://中关闭硬件加速时它们是否仍然存在旗帜/
这三个示例都适用于 Chrome OSX,因此这很可能是特定显卡的浏览器错误。如果你能找到一个基本案例,我会建议用你的 GPU 信息将这个错误报告给 Chromium 元素。
关于jquery - 复杂的 Webkit 错误?相对位置 + Z-Index + 溢出隐藏 + CSS3 变换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17949782/
这个问题已经有答案了: 已关闭14 年前。 ** 重复:What's the difference between X = X++; vs X++;? ** 所以,即使我知道你永远不会在代码中真正做到
我在一本C语言的书上找到了这个例子。此代码转换输入数字基数并将其存储在数组中。 #include int main(void) { const char base_digits[16] =
尝试使用“pdf_dart”库保存 pdf 时遇到问题。 我认为问题与我从互联网下载以尝试附加到 pdf 的图像有关,但我不确定它是什么。 代码 import 'dart:io'; import 'p
我的 Apache 服务器曾经可以正常工作,但它随机开始对几乎每个目录发出 403 错误。两个目录仍然有效,我怎样才能使/srv/www/htdocs 中的所有目录正常工作? 我查看了两个可用目录的权
这些索引到 PHP 数组的方法之间有什么区别(如果有的话): $array[$index] $array["$index"] $array["{$index}"] 我对性能和功能上的差异都感兴趣。 更
我有一个简单的结构,我想为其实现 Index,但作为 Rust 的新手,我在借用检查器方面遇到了很多麻烦。我的结构非常简单,我想让它存储一个开始值和步长值,然后当被 usize 索引时它应该返回 st
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。 请借助示例来解释差异。 最佳答案 这两个都是标量索引:特定类型的基于值的排序
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。 请借助示例来解释差异。 最佳答案 这两个都是标量索引:特定类型的基于值的排序
所以我有一个 df,我在其中提取一个值以将其存储在另一个 df 中: import pandas as pd # Create data set d = {'foo':[100, 111, 222],
我有一个由 codeigniter 编写的网站,我已经通过 htaccess 从地址中删除了 index.php RewriteCond $1 !^(index\.php|resources|robo
谁能告诉我这两者有什么区别: ALTER TABLE x1 ADD INDEX(a); ALTER TABLE x1 ADD INDEX(b); 和 ALTER TABLE x1 ADD INDEX(
我在 Firefox 和其他浏览器上遇到嵌套 z-index 的问题,我有一个 div,z-index 为 30000,位于 label 下方> zindex 为 9000。我认为这是由 z-inde
Link to the function image编写了一个函数来查找中枢元素(起始/最低)的索引 排序和旋转数组。我解决了这个问题并正在检查 边缘情况,它甚至适用于索引为零的情况。任何人都可以 解
我正在尝试运行有关成人人口普查数据的示例代码。当我运行这段代码时: X_train, X_test, y_train, y_test = cross_validation.train_test_spl
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点,然后还进行重写以强制 foo.com/index.php 成为 foo.com/
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点,然后还进行重写以强制 foo.com/index.php 成为 foo.com/
我有一个用户定义的函数,如下所示:- def genre(option,option_type,*limit): option_based = rank_data.loc[rank_data[
我有两个巨大的数据框我正在合并它们,但我不想有重复的列,因此我通过减去它们来选择列: cols_to_use=df_fin.columns-df_peers.columns.difference(['
感谢您从现在开始的回答, 我是React Native的新手,我想做一个跨平台的应用所以我创建了index.js: import React from 'react'; import { Co
我知道 not_analyzed 是什么意思。简而言之,该字段不会被指定的分析器标记化。 然而,什么是 NO_NORMS 方法?我看到了文档,但请用简单的英语解释我。什么是索引时间字段和文档提升和字段
我是一名优秀的程序员,十分优秀!