如果我在我的页面上使用 CSS 缩放，然后将另一个包含动画的网站加载到 iframe 中，我的页面会变得模糊并且动画行为
If I use CSS scale on my page and then load another website containing animation into an iframe, my page gets blurry and animations misbehave
我使用jQuery和CSS的组合来运行动画。这很好用，直到我将网站加载到页面上的 iframe 中。
如果加载的网站包含动画，我的动画将停止正常工作。细纹也大部分消失了，我的字体开始看起来非常块状。
我已尽头。我尝试只使用 CSS 动画，这些没有解决任何问题。我尝试使用其他动画库（速度），但没有任何方法可以解决问题。
有没有人经历过这样的事情？
编辑 1：首先，我很抱歉没有提供任何代码。javascript"应用程序"非常大，只有当我将网站加载到包含一些动画的iframe中时，才会出现此问题。
我已经尝试了jQuery的"noConflict"模式（无济于事）。我将构建一个只有一个动画和一个 iframe 的小页面，看看我是否可以复制问题，我将发布完整的代码等。
感谢到目前为止的回复。
编辑 2：我有一些代码可以说明页面外观和感觉的问题，但我没有动画问题的示例。不过，我认为代码演示了问题。
我现在有一些代码。加载页面时，请尝试以下操作：
- 按下标有"打开/关闭菜单"的按钮：您应该会看到一个"菜单"幻灯片向右，从淡蓝色封面下方出来。
- 再次按下标有"打开/关闭菜单"的按钮：菜单向左滑动并隐藏。
- 按下标有"在iframe中加载/卸载网站"的按钮时，请密切注意按钮上的文字。在我的MacBook上，文本变得明显模糊。
- 如果您再次按下"在 iframe 中加载/卸载网站"按钮，文本将恢复为锐利。
- 如果您在使用标有"将比例从 1.2 切换到 1 并返回"的按钮将比例设置为 1 后重复这些步骤，则不会模糊。
注：完成最初的测试页面后，我意识到即使没有使用 jQuery animate 命令，也会发生模糊（即：我删除了 toggleMenu 例程）。
在没有动画的情况下进行测试后，我尝试在没有jQuery的情况下进行测试。瞧，模糊消失了。
所以 ：有人听说过这个问题吗？我认为如果没有jQuery，我无法重写当前的"应用程序"。
代码：测试：jQuery和动画
<html class="scaled">
<head>
<title>Test: jquery and animation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html {
display : none;
-moz-transform-origin : 0 0;
-ms-transform-origin : 0 0;
-o-transform-origin : 0 0;
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
}
body {
font-family : Arial, sans-serif;
}
#toggleMenu {
box-shadow : 5px 5px 12px rgba(25, 25, 25, 0.5);
position : relative;
width : 100px;
}
#toggleMenu div {
border-bottom : 1px solid #0276fd;
width : 100px;
}
#menuCover {
box-shadow : 0 5px 12px rgba(25, 25, 25, 0.5);
background-color : #0276fd;
height : 170px;
position : relative;
top : -170px;
width : 100px;
}
</style>
</head>
<body>
<script>
jQuery(document).ready(function() {
var
Set_Scale = function(fScale) {
jQuery('html').css({
'display' : 'block',
'-moz-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'-ms-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'-o-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'-webkit-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'transform' : 'scale(' + fScale + ', ' + fScale + ')'
});
}
; // End of vars
Set_Scale(1.2);
this.toggleMenu = function() {
var
jqMenu = jQuery('#toggleMenu')
; // End of vars
if (true == jqMenu.hasClass('open')) {
jqMenu
.removeClass('open')
.animate({
'left' : 0
}, 250)
;
} else {
jqMenu
.addClass('open')
.animate({
'left' : '101px'
}, 250)
;
}
};
this.loadWebsite = function() {
var
jqiframe = jQuery('iframe')
; // End of vars
if (true == jqiframe.hasClass('website')) {
jqiframe
.removeClass('website')
.attr('src', '')
;
} else {
jqiframe
.addClass('website')
.attr('src', 'http://www.nbc.com')
;
}
};
this.toggleScale = function() {
var
jqHTML = jQuery('html')
; // End of vars
if (true == jqHTML.hasClass('scaled')) {
jqHTML.removeClass('scaled');
Set_Scale(1);
} else {
jqHTML.addClass('scaled');
Set_Scale(1.2);
}
};
});
</script>
<input type="button" onclick="toggleMenu()" value="Open/Close the Menu">
<input type="button" onclick="loadWebsite()" value="Load/Unload website in iframe">
<input type="button" onclick="toggleScale()" value="Toggle scale from 1.2 to 1 and back">
<br/><br/>
<div id="toggleMenu">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<div>Menu Item 3</div>
<div>Menu Item 4</div>
<div>Menu Item 5</div>
<div>Menu Item 6</div>
<div>Menu Item 7</div>
<div>Menu Item 8</div>
<div>Menu Item 9</div>
</div>
<div id="menuCover"></div>
<iframe src="" frameborder=""></iframe>
</body>
</html>
代码：测试：jQuery，但没有动画
<html class="scaled">
<head>
<title>Test: jquery but no animation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html {
display : none;
-moz-transform-origin : 0 0;
-ms-transform-origin : 0 0;
-o-transform-origin : 0 0;
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
}
body {
font-family : Arial, sans-serif;
}
</style>
</head>
<body>
<script>
jQuery(document).ready(function() {
var
Set_Scale = function(fScale) {
jQuery('html').css({
'display' : 'block',
'-moz-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'-ms-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'-o-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'-webkit-transform' : 'scale(' + fScale + ', ' + fScale + ')',
'transform' : 'scale(' + fScale + ', ' + fScale + ')'
});
}
; // End of vars
Set_Scale(1.2);
this.loadWebsite = function() {
var
jqiframe = jQuery('iframe')
; // End of vars
if (true == jqiframe.hasClass('website')) {
jqiframe
.removeClass('website')
.attr('src', '')
;
} else {
jqiframe
.addClass('website')
.attr('src', 'http://www.nbc.com')
;
}
};
this.toggleScale = function() {
var
jqHTML = jQuery('html')
; // End of vars
if (true == jqHTML.hasClass('scaled')) {
jqHTML.removeClass('scaled');
Set_Scale(1);
} else {
jqHTML.addClass('scaled');
Set_Scale(1.2);
}
};
});
</script>
<input type="button" onclick="loadWebsite()" value="Load/Unload website in iframe">
<input type="button" onclick="toggleScale()" value="Toggle scale from 1.2 to 1 and back">
<br/><br/>
<iframe src="" frameborder=""></iframe>
</body>
</html>
代码：测试：没有jQuery和动画
<html id="elementHTML" class="scaled">
<head>
<title>Test: no jquery and no animation</title>
<style>
html {
-moz-transform-origin : 0 0;
-ms-transform-origin : 0 0;
-o-transform-origin : 0 0;
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
-moz-transform : scale(1, 1);
-ms-transform : scale(1, 1);
-o-transform : scale(1, 1);
-webkit-transform : scale(1, 1);
}
html.scaled {
-moz-transform : scale(1.2, 1.2);
-ms-transform : scale(1.2, 1.2);
-o-transform : scale(1.2, 1.2);
-webkit-transform : scale(1.2, 1.2);
}
body {
font-family : Arial, sans-serif;
}
</style>
</head>
<body>
<script>
loadWebsite = function() {
if ('website' == document.getElementById('elementIFRAME').className) {
document.getElementById('elementIFRAME').className = '';
document.getElementById('elementIFRAME').src = '';
} else {
document.getElementById('elementIFRAME').className = 'website';
document.getElementById('elementIFRAME').src = 'http://www.nbc.com';
}
};
toggleScale = function() {
if ('scaled' == document.getElementById('elementHTML').className) {
document.getElementById('elementHTML').className = '';
} else {
document.getElementById('elementHTML').className = 'scaled';
}
};
</script>
<input type="button" onclick="loadWebsite()" value="Load/Unload website in iframe">
<input type="button" onclick="toggleScale()" value="Toggle scale from 1.2 to 1 and back">
<br/><br/>
<iframe id='elementIFRAME' src="" frameborder=""></iframe>
</body>
</html>
啪！
布鲁斯。
只是预感，你可能想看看jQuery的"noConflict"模式。 http://api.jquery.com/jquery.noconflict/
相关文章：
- 我的动画没有按预期工作
- 为什么我的脚本正在运行动画，但没有显示它
- 为什么动画完成后我的元素不再隐藏
- 为什么在使用JQuery时，当我悬停时，没有流畅的动画
- 如何为我的菜单创建平滑的动画
- 使用动画gif作为我的网站's的最爱
- 我希望我的动画在屏幕上水平移动，并在按下停止按钮后停止
- 为什么我的动画"重放的“;当通过innerHTML添加元素时
- 我如何使用javascript来判断我的动画'It’太慢了，改为使用即时更改
- transitiononed事件不;我的动画结束时不要开火
- 我如何添加类一旦我的动画已经完成
- 是想控制我的动画的FPS一个很好的理由继续使用setTimeout而不是requestAnimationFrame
- 为什么我的动画会“跳”?
- 为什么我的动画做了我没有预料到的事情?
- 我怎么能停止我的动画圈?- JS
- 为什么只有我的动画坏了
- 为什么我的动画在滚动时多次触发
- 如何提高我的动画'
- HTML5/Javascript -为什么我的动画在第一次开始时跳跃
- 我可以'不能让我的动画工作在加载我的网站使用jquery
