i have a problem in iPad Safari. when i use Javascript to append image to div using elm.appendChild(img) the images don't appear until the screen is touched. the same code works perfect on IE,Firefox,Chrome,and android browsers.
i have uploaded video that shows the problem. http://www.youtube.com/watch?v=nBN9fThDik8
is it related to the device ? or there some special code for loading images in iPad safari?
or any solution ?
iPad (more so than iPhone as far as I've experienced, although that's just a gut feeling) is notorious for avoiding loading and rendering large resources unless it decides the user is going to see them.
How about faking the user input required to trigger the render, ie the scroll, after appending the image? Sample code here, may work:
function scroll(){
var body = document.body;
var xy = [body.scrollLeft, body.scrollTop];
window.scrollTo(xy[0],xy[1]+1);
window.scrollTo(xy[0],xy[1]);
};
To be called immediately afterwards, eg:
appendImg();
scroll();
Related
I was testing a script which works fine on almost all desktop browsers and Android's chrome browser but when I tested it on Android version of Firefox Mobile browser I'm got wrong viewport dimensions.
So I decided to put together a small script to log the viewport dimensions at three stages [init (before load), after load and after a 1 second timeout]
http://kraftpixel.in/test/viewport.html
This is what I receive on my Moto-E android phone.
Also I noticed 'Dimensions after load' are random, On one occasion I noticed w=980 h=480 after load but presently I get the following result.
Initial dimensions : w=980 h=480
Dimensions after load : w=360 h=519
1 Sec after load via setTimeout() : w=360 h=519
Can someone please test this behavior on their android phone using the Firefox Mobile browser?
Suggestions are welcome but I need to execute the script before onLoad.
Its a script similar to those '(Pre)loading screens' on some websites.
I had the same problem that you and after some research I found that to have those properties correctly initialized you should wait until DOMContentLoaded is fired.
Try to modify your script using that event instead of onload and you will have the same result that when you fire the log function one second after load.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
This project has a lot of junk JS that we've inherited from the previous devs.
We've recently had images stop appearing on http://www.thegospelcoalition.org on tablet and mobile.
As you can see, images are fine in desktop. Pull it up on a device or in Chrome dev tools emulator and you can see the issue.
We're working fine in development, images appear as expected.
We've cleared CloudFlare cache but still no joy.
It's problematic to troubleshoot because locally, the team is fine.
Any pointers?
In js/aggregate-ck.js, you have this function that gets the img src and sets it as a background-image:
_transferImages = function(selector){
var $selector=$(selector);
$selector=$selector.not($_transferredImages);
$selector.each(function(){
var $this=$(this),
$img=$this.children("img"),
$img1;
if($img.length){
$img1=$img.eq(0);
$this.css({"background-image":"url('"+ $img1.attr("src")+"')"});
$img1.remove();
}
});
$_transferredImages=$_transferredImages.add($selector);
return $selector;
};
When I use a desktop user agent, it works fine because the images have an src attribute. Unfortunately, with a mobile user agent, these images do not have an src, but a data-cfsrc attribute.
To correct this function, replace
$img1.attr("src")
with
($img1.attr("src") || $img1.attr("data-cfsrc"))
and you're good to go!
The only thing I can see that becomes problematic is there's a call to an image that should be loaded at a certain screen size. You can see that the value returned by whatever performs the comparison is obviously returning incorrectly:
background-image: url(http://www.thegospelcoalition.org/undefined);
Fix that and you should be good. (Not respecting other erroneous errors)
I'm noticing my Phonegap app is having some memory issues on iOS7 that weren't happening on iOS6 .
long iScroll lists with many images
displaying images from the phone's album (9mp) will crash after you view several
For #1, this was never an issue on iOS6, regardless of device.
For #2, I am re-using the same DIV element to display the next picture, so it seems that the previous image is not being cleared.
The techniques mentioned in this post no longer appear to work in iOS7:
iPad/iPhone browser crashing when loading images in Javascript
The best solution for this problem I found is the following code:
var img = document.getElementById('imageID');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' +
'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
setTimeout(function() {
img = null;
}, 60000);
This sets the src attribute to a tiny gif and then waits long enough for garbage collection to happen eventually.
See: http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/
This should work for you. I could verify that the memory is released by using the Xcode instruments. Unfortunately this solution doesn't seem to work for homescreen apps which I am using.
I'm having a bit of trouble with an if statement.
I've got a little lightbox popup error message running on the site. It works fine across everything except my windows phone where the popup load at the top of the screen (apparently ie mobile doens't like absolute positioning).
My solution is to simply scroll to the top of the page to display this (but only on ie-mobile.
Here's my code:
function checkiemob()
{
if (navigator.userAgent.match(/iemobile/i))
{
window.scrollTo(0,0);
}
}
If I remove the if statement this works fine. I've also tested the if statement with simply inserting text and that works too.
Cheers
I've been working some time on Hybrid applications, and i can tell that it's not worth it if you're not CSS professional and know everything about differences in browsers.
Don't know about absolute, but maybe it will give you a hint:
position:fixed - attaches element to the specified position on the page. ( HTML standart ). Works fine in Safari and Google Chrome.
But in IEmobile this position fixes the element to the display!
I think there might be same problem with you'r absloute
That means if i try to move whole page - in google and safari this fixed element will move along with the page, remaining on the same place, but in IEmobile it will stay on the same place
I am building a site that has an image map menu with a popup box that is supposed to pop at the mouse when the mouse is hovering over a particular area. It works great in firefox and IE but when I load the page in chrome the boxes appear as if the page were not scrolled. it works fine if the page is scrolled all the way to the top, but as soon as the user scrolls down, the boxes are to high on the page.
I am using a script i got from http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip www(dot)dramanotebook(dot)com/menu/ (i can only put one hyperlink in)
Thanks in advance for Your help
Thats a bug in this script that also shows up on the example page. Maybe its enough to delete this line:
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
I was about to ask 'have you tried this in Safari?', since Chrome and Safari both use the webkit engine.
Take a look at the .js file.
function showToolTip(e,text){
/* blah blah*/
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; /**** THIS ****/
var leftPos = e.clientX - 100;
/*etc.*/
}
It has a fix applied specifically to Safari, using the userAgent string. Chrome sends 'Safari' in the user agent string, too, so it will apply that to Chrome also. This is generally considered a poor practice. In general, I'd say the scripts from dhtmlgoodies are very outdated. Is this fix still needed for newer webkit renderers? Who knows. You might try commenting it out and seeing if that fixes it.