I use a combination of jQuery and CSS to run animations. This works very well until I load a website into an iframe on the page.
If the loaded website contains animations, my animations stop working correctly. Also fine lines mostly disappear and my fonts start to look very blocky.
I'm at my wits end. I tried just using CSS animations, these didn't fix anything. I've tried to use other animation libraries (velocity), but nothing fixes the problem.
Has anyone experienced anything like this?
Edit 1: First, I'm sorry for not providing any code. The javascript "app" is very large and this problem only occurs when I load a website into an iframe that contains some animation.
I have tried the jQuery's "noConflict" mode (to no avail). I am going to build a small page with just one animation and an iframe to see if I can replicate the problem, I'll post the full code etc.
Thanx for the replies so far.
Edit 2: I have some code that illustrates the problems to the pages look and feel but I don't have an example of an animation problem. Still, I think the code demonstrates the problem.
I now have some code. When you load the page, please try this:
- Press the button labeled 'Open/Close the Menu': You should see a "menu" slide to the right, out from under the pale blue cover.
- Press the button labeled 'Open/Close the Menu' again: The menu slides back to the left and is hidden.
- Pay close attention to the text on the buttons when you press the button labeled 'Load/Unload website in iframe'. On my MacBook the text becomes noticeably blurry.
- If you press the 'Load/Unload website in iframe' button a second time, the text goes back to looking sharp.
- If you repeat these steps after using the button labeled 'Toggle scale from 1.2 to 1 and back' to set the scale to 1, there is no blurriness.
N.B.: After completing my initial test page, I realized the blurriness occured even if no jQuery animate command was used (i.e.: I removed the toggleMenu routine).
After testing without animation, I tried testing without jQuery at all. Voila, the blurriness disappears.
So: Has anyone heard of this problem? I don't think I can rewrite the current 'app' without jQuery.
Code: Test: jQuery and animation
<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>
Code: Test: jQuery but no animation
<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>
Code: Test: no jQuery and no animation
<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>
TIA!
Bruce.
