I have a javascript "loading" function like this:
function splashScreen() {
var div = document.createElement('div');
div.appendChild(document.createTextNode("some text"));
div.style.position = "fixed";
div.style.width = "100%";
div.style.height = "100%";
div.style.left = "0";
div.style.top = "0";
div.style.zIndex = "1000";
div.style.background = "white url('img/ajax-loader.gif') no-repeat center";
div.style.fontSize = "x-large";
div.style.textAlign = "center";
div.style.lineHeight = "3em";
div.style.opacity = "0.75";
div.style.filter = "alpha(opacity=75)"; // fix ie
document.body.appendChild(div);
return true;
}
I use this function in the form action (onsubmit="return splashScreen()") to show a "rotating logo" while the next page load...
The problem is in that "img/loading.gif" and safari (on winXP): in ff and ie I have no problems, and I clearly see the animated gif. In safari I can't see it.
If I change the image with a (obviously static) png the image appears...
Am I doing something wrong? What's the problem with safari?
Safari doesn't handle animated background well enough. I've seen a bug report about that somewhere.
Why don't you just use an image instead of a background?
I'm not personally familiar with this issue, but I was able to find a handful of similar bug reports online. What else are you doing on this page? Are you keeping focus on the page when you experience this issue? Apparently the handling of animated GIFs is pretty complicated:
http://webkit.org/blog/96/background-music/
http://www.quirksmode.org/bugreports/archives/2004/12/animated_gifs_u.html
https://bugs.webkit.org/show_bug.cgi?id=7320
Particularly relevant snippet from that first link:
In both Safari 2 and WebKit nightlies, GIFs don’t animate unless they are being painted somewhere. If an animated GIF becomes invisible, then the animation will pause and no CPU will be consumed by the animation. Therefore all animated images in a background tab will not animate until the page in that tab becomes visible. If an animated GIF is scrolled offscreen even on a foreground page, it will stop animating until it becomes visible again.
Safari’s CPU usage with animated GIFs is very good. (For a while readers of MacNN thought Safari had an “animated GIF problem” because of slowness when typing in forum posts, but that bug actually had to do with the Flash ads at the top and bottom of the page.)
Maybe it's your gif image? I just fired up your code on Safari 4.0.4 under windows with a gif created on http://www.ajaxload.info/ and works flawlessly.
Related
I've researched quite a bit and can't solve this issue. Only appears on Safari (Mac & iOS). Works on Chrome, FF, Edge, etc.
UPDATE: The flickering occurs in FireFox as well...
I'm using the IntersectionObserver API along with the required polyfil to lazy load images. When they come into view, the intersection observer replaces the low resolution image set as the background-image and replaces it with the high resolution image stored in a data attribute on the div.
The behaviour is 'working' as the blurry initial image is set, then replaced by the high quality one but there is a white flicker or flash happening inbetween... (The background of the page is white so maybe that's what is showing through?)
After some reading: (How to prevent a background image flickering on change) I did fix the jumping issue by preloading the images using the new Image() consructor.
const setBackgroundImage = (e) => {
let image = new Image();
image.onload = () => e.style.backgroundImage = `url(${e.dataset.bgImage})`;
image.src = e.dataset.bgImage;
};
An example HTML element (PHP):
<div class="my-div"
style="background-image: url('<?= $imagePreload ?? $image; ?>');"
data-bg-image="<?= $image; ?>"
</div>
I've tried playing around with backface-visibility: hidden but no luck there. I'm not animating anything, just replacing the src on the div with the preloaded, full size image.
You can solve this by loading the higher resolution image before it scrolls into view. Set the rootMargin option to something like 200px when creating your IntersectionObserver to have the browser start loading the image 200px before it enters the viewport.
Been trying to get my Wordpress Theme to work on iOS for a while now. But there seems to be something missing or I am not getting about how iOS devices work causing me work blindly on this.
I am trying to get a menu (essentially a div) to appear every time another div is tapped. My current setup works on Android, but not on iOS.
<script>
var $v = document.getElementsByClassName("midbar")[0]; //the div that activates the appearance of the menu.
var $x = document.getElementsByClassName("menubar")[0]; //the menu that has it's opacity set to 0 at the start.
$v.addEventListener("mouseup", TapEvent, false); //I used mouseup, touchend works as well.
function TapEvent(event) {
if ($x.style.opacity == 0) {
$x.style.height = "300px";
$x.style.opacity = "1";
$x.style.overflow-y = "auto";
}
else {
$x.style.height = "0px";
$x.style.opacity = "0";
$x.style.overflow-y = "hidden";
}
event.preventDefault();
return false;
}
</script>
Here is the temporary site: itdctest3.comule.com
The theme converts to mobile mode when the screen size is below 700px. The div that is supposed to reveal the hidden menu is the Black Space to the right of the Site Title at the top of the page.
Any help or even just leads on what to research will be much appreciated. Thanks in advance guys.
I found a solution that works, but I still don't understand why what I posted up top worked for Android and not iOS.
All I had to do was wrap the div that activated the other div in a span with a onclick="void(0)" inside it.
Somehow it works now. But I still have to test the hell out of it.
Thank you to all who answered.
I am having a problem with a site. My problem is I am loading several images progressively - starting with a small resolution image for fast loading I am then ajaxing a bigger image in (normally the original size that a user uploads).
The code below works perfectly. HOWEVER when done on chrome on windows. if the bigger image is a really high res (lets say 4400 x 4000). The screen would go white and the image would disappear. The white bursts out of the container (which has overflow:hidden) on it and covers the screen. Only the elements with a higher z-index over the image displays.
If I inspect the element that is white. It shows that it is the element, and the image is loaded - the URL is fine and if I click the image to open in another tab it loads fine.
Does anyone have any idea why this is happening?
if(href){
var img = document.createElement('img');
img.className = 'openLBFullView hidden';
img.onload = function(){
loadBiggerImg(this);
};
$(img).data('url',$currentImg.data('url'));
img.src = href;
img.id = 'my-image';
}
var loadBiggerImg = function(img){
var originalImg = $('#my-image');
//append the img to the document
originalImg.before(img);
// append original styles and classes to new image
$(img).attr('style',originalImg.attr('style'));
$(img).attr('class',originalImg.attr('class'));
// fix for windows IE adding attributes
$(img).removeAttr('width').removeAttr('height');
//fade in new image over the top and remove old one
$(img).fadeIn(200,function(){
originalImg.remove();
});
}
One of the possible solutions - large images dont render in chrome
This not neccesarily will fix your issue though - I'd try using lowres jpegs scaled to highres and preload big one - once loaded fade lowres one and show the big one (in a way fake the progressive JPEG) - Hope that helps man.
I have a problem concerning changing the background position with jQuery. The website I am working on (http://www.jeroenrood.nl/GortzFruit), has a scrolling animation (either scrollwheel or on anchor click), and the top position of the img-tag in the background changes slowlier than the scrolling speed.
This creates a fluent parallax scrolling effect in Chrome and Firefox, but not in Internet Explorer. In IE (regardless which version) this effect stutters a lot (as can be seen at the aforementioned link).
This is the code that I use, concerning the parallax scrolling effect (HTML):
<div style='height:1000px;background-color:#333;position:relative;' id='page1'>
<img src='images/bg1.png' alt='' style='display:inline;position:absolute;top:-60px;left:0px;width:100%;z-index:0;' class='background' />
</div>
And this is the javascript/jQuery code:
var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
//if the first page is in the viewport
if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
newOffset = -60 + ((scrollTop - page1)*0.8);
$('#page1 .background').css('top',newOffset);
}
});
Somehow IE seems to lag in processing this position of the image and applying it. Does anyone have an idea of how to make IE have a similar smooth scrolling effect as Chrome or Firefox?
Thanks in advance,
Jeroen
Edit:
Okay, I am on my way to finding the solution!
I tried background-attachment:fixed, which did not result in stuttering in IE. Then I thought, well, this css could be combined with the parallax effect. There are gaps in the transition in IE that cause the stuttering, so maybe I can bridge them with background-attachment:fixed.
This seems to work! Now it even is a fluent animation in IE. Even with a massive background image.
This is the code (HTML):
<div style='height:1000px;background-color:#333;position:relative;text-align:center;' id='page1'>
<div class='background' style='display:inline;position:absolute;top:-60px;left:0px;height:1000px;width:2000px;z-index:0;background-image:url(images/bg1.png);background-repeat:no-repeat;background-position:left -60px;background-attachment:fixed;'></div>
</div>
And this is the relevant javascript/jQuery code:
var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
//if the first page is in the viewport
if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
newOffset = "left "+ (-60 - ((scrollTop - page1)*0.2))+"px";
$('#page1 .background').css('background-position',newOffset);
}
});
Make this image a lot smaller. It is 2000×2386 pixels and 8.3MB large. You could make it 1000×1193 pixels and convert it to JPEG. JPEG compresses photos better than PNG. Browsers can process small images a lot faster than large images.
To see the issue go to this page and click the next text. The small, medium fullsize text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.
Code (http://moments.qa.chucksoft.com/Scripts/mvc/views/show/Showview.js) Line 154:
ShowView.prototype.setImageSrc = function (imagesrc) {
var image = $('img#image');
image.attr('src', imagesrc);
image.load(function () {
var container = $('div#imagecontainer');
container.fadeIn(200);
var resizer = new Resizer();
resizer.resize(this.width, this.height, maxWidth, maxHeight);
var image = $(this);
var imageWidth = (resizer.width + 23);
container.width(imageWidth);
});
image.attr('src', imagesrc);
};
From what I can tell the container.width(imageWidth); is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.
I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.
I'm at a loss on how to fix this issue. Any insights would be much appreciated.
Update
To clarify, the issue arises when you transition from a landscape image to a portrait image, otherwise everything works as expected.
... ?
I have yet to figure this issue out. I have taken a different direction.