Javascript 如果我在我的页面上使用CSS缩放，然后将另一个包含动画的网站加载到iframe中，我的页面就会变得模糊，动画也会出现问题
我使用jQuery和CSS的组合来运行动画。在我将网站加载到页面上的iframe之前，这一切都非常有效 如果加载的网站包含动画，我的动画将停止正常工作。此外，细线条大多消失，我的字体开始看起来非常块状 我束手无策。我试着只使用CSS动画，但没有解决任何问题。我曾尝试使用其他动画库（velocity），但没有解决问题 有没有人经历过这样的事情 编辑1： 首先，我很抱歉没有提供任何代码。javascript“app”非常大，只有当我将网站加载到包含一些动画的iframe中时，才会出现这个问题 我尝试了jQuery的“noConflict”模式（没有效果）。我将构建一个只有一个动画和一个iframe的小页面，看看是否可以复制这个问题，我将发布完整的代码等等 Thanx获得了目前为止的回复。 编辑2： 我有一些代码说明了页面外观的问题，但我没有一个动画问题的例子。不过，我认为代码说明了这个问题 我现在有了一些代码。加载页面时，请尝试以下操作：Javascript 如果我在我的页面上使用CSS缩放，然后将另一个包含动画的网站加载到iframe中，我的页面就会变得模糊，动画也会出现问题,javascript,jquery,css,animation,iframe,Javascript,Jquery,Css,Animation,Iframe,我使用jQuery和CSS的组合来运行动画。在我将网站加载到页面上的iframe之前，这一切都非常有效 如果加载的网站包含动画，我的动画将停止正常工作。此外，细线条大多消失，我的字体开始看起来非常块状 我束手无策。我试着只使用CSS动画，但没有解决任何问题。我曾尝试使用其他动画库（velocity），但没有解决问题 有没有人经历过这样的事情 编辑1： 首先，我很抱歉没有提供任何代码。javascript“app”非常大，只有当我将网站加载到包含一些动画的iframe中时，才会出现这个问题 我尝试
测试：jquery和动画
html{
显示：无；
-moz变换原点：0；
-ms变换原点：0；
-o变换原点：0；
-webkit转换原点：0；
变换原点：0；
}
身体{
字体系列：Arial，无衬线；
}
#切换菜单{
盒影：5px 5px 12px rgba（25,25,25,0.5）；
位置：相对位置；
宽度：100px；
}
#切换菜单div{
边框底部：1px实心#0276fd；
宽度：100px；
}
#梅努科弗{
盒影：0 5px12px rgba（25,25,25,0.5）；
背景色：#0276fd；
高度：170px；
位置：相对位置；
顶部：-170px；
宽度：100px；
}
jQuery（文档）.ready（函数（）{
变量
设置刻度=功能（fScale）{
jQuery（'html'）.css({
“显示”：“块”，
“-moz变换”：“缩放（“+fScale+”，“+fScale+”），
“-ms变换”：“缩放（“+fScale+”，“+fScale+”），
“-o变换”：“缩放（“+fScale+”，“+fScale+”），
“-webkit转换”：“缩放（“+fScale+”，“+fScale+”），
“转换”：“缩放”（“+fScale+”，“+fScale+”）”
});
}
；//变量的结束
设置_刻度（1.2）；
this.toggleMenu=函数（）{
变量
jqMenu=jQuery（“#切换菜单”）
；//变量的结束
if（true==jqMenu.hasClass（'open'））{
jqMenu
.removeClass（'打开'）
.制作动画({
“左”：0
}, 250)
;
}否则{
jqMenu
.addClass（“打开”）
.制作动画({
“左”：“101px”
}, 250)
;
}
};
this.loadWebsite=函数（）{
变量
jqiframe=jQuery（'iframe'）
；//变量的结束
<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>
<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>
<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>