I have a website that consists mostly of images, which are either set as background to divs or as .
Problem is that on every phone I have checked, when scrolling the site top to bottom and vice-versa images are rendered slowly. Sometimes they remain rendered, other times they get re-drawn.
It's not that the images are not loaded, as they get displayed at some point of time, but after a few seconds when swiping back to them, they disappear and appear when scrolling back to them.
I've checked with all Samsung Galaxy lineup, including tablets and this behavior is the same.
Preloading the images seems to have absolutely no effect, and the same behavior appears whether the image resolution is high or low.
Is there any way to force Chrome not to redraw images randomly?
Related
I'm having an issue where an animaed png that is encoded to only play once, plays twice on IOS. I am swapping out a blank PNG to the animated PNG when it gets within viewport. Once in viewport since its on scroll it checks to see if the src of the image is the animated or static. If its the static it doesn't do a swap.
On desktop its perfect. But on mobile the animation plays twice. I thought it was my js but it turns out the png itself is acting differently in IOS.
I checked out the direct url to the animation and it turns out even though the PNG is set to play only once on IOS it plays twice.
The PNG in quesiton is used here: https://www.xeroproject.com/wtf/
And the direct link is here: https://www.xeroproject.com/wtf/wp-content/themes/wtf_big5/images/arrow_animate.png
WHen you scroll down to the map an arrow animates and map markers fall in. Again, Desktop perfect but on ios it animates twice. Same goes for going to the direct link.
Is there a different way to encode it I can use? or is this something I can't control in IOS?
I am using my company's slider plugin. It works great on all browsers, except for Safari on Mac. The problem that happens is that, while the image shows up, the white text on the image that's supposed to appear on the right does not show up on initial load but if you resize the window, it suddenly appears.
Here is the site:
http://redners.wpengine.com/ (only the sliders 2,3 and 5 have this text).
I tried setting backface-visibility in css and messing with the redraw function in jquery, but neither worked.
We have a web based LOB application and currently we are shrinking the content of the app when it goes onto a smaller resolution browser i.e. IPad, using the viewport. using javascript:
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=0.8');
This works fine asthecially but it seems to produce a performance hit when the browser has to scale everything down, especially with our kendo controls (the grid takes a massive hit).
Just wondering if anyone can advice a better was to scale down the viewport without hitting any performance issues?
I'd be surprised if you're getting a performance hit from scaling the page since that happens on the GPU and is expected to be very fast.
Additionally, your viewport descriptor as-is wont scale the page unless you have content that's explicitly wider than your layout size (for example, a very wide image). The browser will automatically zoom out to show all the content on load so your best bet is to pick a good layout width for your page (e.g. width=1200) and not set an initial-scale. width=device-width will attempt to lay your page out into the size of the device's screen, which is not what you want if you're trying to scale your page down.
I have a landing page which is a few sections with images as the background. Each section takes up the size of the screen. In one of the sections the images change every 5 seconds.
My website loads and works fine on Desktop (as far as I can tell).
However on mobile as I scroll up and down the page it keeps on reloading.
For example: I'm looking at section 2 that has been loaded. I scroll down to section 3 and it's still loading. Once it's loaded I scroll to section 2, section 2 begins reloading even though the it's the same image there.
No matter how much I scroll up and down this happens.
I am using bootstrap 3, jQuery (not jQuery mobile) and HTML5
*Note, section 1 has images that keep on swapping in and out. I load those images in the background before replacing the old image by:
var imgPreload = new Image();
$(imgPreload).attr('src', '/new-image.jpg').load(function() {
$(this).remove(); // prevent memory leaks
$('#section1').css('background-image', 'url(/new-image.jpg)');
}
Why don't you use a simple pure css slideshow for your first section?
pure Css3 slideshow for me is a simple but good solution for fullscreen background image.
On which mobile device has been tested?
I encountered this problem on iPad (4th generation), iPad (3rd generation) and some iPhone 5C and 5S.
What's the images size? They have been appropriately compressed?
I partially solved by reducing the images size
I'm developing a web for iPad/iPhone and need to set different viewports for portrait and landscape mode. I'm doing this with Javascript with the orientationchange event, but there is a problem, after loading the page when I first rotate the device, the content doesn't get scaled, but this is only the first time, if I go back to the first state and then rotate back again, this time works perfectly.
I tried the same but loading the page with the other orientation and it's the same problem, it only scales the content properly after the second try.