I stumble upon a strange behavior on one off my websites. The website makes use of superbgimage.js jquery script, which scales an image fullscreen and is part of a slider.
Now on Chrome and Firefox the images are scaled as expected (mostly scaled down as i make the images intentially a little bigger). The images are not looking scaled in IE11. The strange thing is when i hit F12 (to see developersmode) and hit F12 again, the images are scaling correctly in IE11.
This only occurs when F12 developers window is pinned not when the developers window is "free floating". So i guess it has to do with the browser height in IE11 not the same on initialize and after hitting F12
I already have
img {-ms-interpolation-mode: bicubic;}
Any suggestions?
Related
We have published an HTML5 Canvas through Adobe Animate. And have reduced the file size down to under 2MB total and it loads in under 3 seconds on all browsers. But we are having frame (FPS) lagging issues on Google Chrome only.
We deactivated the 2D canvas chrome accelerator in Chrome Flags, but are still having issues getting the animation run smoothly at larger screen sizes.
Is there a way to publish the canvas in Animate so this doesn't happen? Or is there some JavaScript code to allow for Chrome to load the animation at the correct FPS?
We have tested in IE, Edge, and FF and all of those browsers run smoothly. It is only Google Chrome that is experiencing the issue.
Having profiled this, I have found that the code makes a large number of calls to drawImage. On my machine, it spent 86% of its time in calls to drawImage.
Its possible that its redrawing the large images every frame. See if there is a way to stop this from occurring.
Try removing the background images and having just the lines, if the lag disappears, you have your answer.
Potentially relevant:
Why does chrome struggle to display lots of images on a canvas when the other browsers don't?
I've got many reports from Android visitors to my blog said that when they are browsing any post from my blog, the images inside the posts get re-sized gradually to be hidden completely (width and height like be zeros, just the shadow of the image is visible).
I've tested that and I confirm the issue in android browser and Facebook browser as well, but Google Chrome shows everything OK.
I don't know what is causing this problem, JavaScript or CSS problem? I'm using a bootstrap css code for images for responsiveness on mobile devices.
Seems this line did the problem:
img {box-sizing:border-box};
I removed it and it works in Android browser!
Working on Canvas mobile game using CreateJS library. Everything goes smoothly except this issue:
When I exit browser by Home Button or Lock the phone, after lock screen or relaunch of browser, Canvas element is invisible. Refresh solves the problem.
I tried chrome element inspector and as you can see on the screenshot, element exists and it's on right position. I don't know why it's invisible.
Any ideas?
If you grab the pixels, you'll find that it's actually still there. This is possibly a bug in Chrome 49/50 (which I'm trying to find an acceptable workaround for).
If you change the canvas width to 0 and then back to the correct size, or rotate your device a few times or press the running tabs button and swap back again you could find it'll start being visible again.
It seems to be some hibernate problem with the hardware acceleration :/
This is a weird issue that I am only experiencing on a Native browser on Samsung Galaxy Tab 2 and Galaxy S2 in the native browser.
This has also been tested on other android phones and tablets such as the Nexus 7 & Galaxy S4 but their native browser is chrome, so it appears fine. This issue is also not present on any IOS browsers, Windows Desktop browsers or Mac Desktop browsers.
It's almost asif the webpage is loaded twice ontop of itself!
As there is a duplicate canvas element, that updates as the main canvas does.
Here it appears asthough it only happens when rotated in landscape mode, but I beleive that in portrait mode, the canvas' are perfectly aligned over the top.
What is even weirder, the menu button that you see is a toggle button, tap to open menu, tap to close menu. On this device when you tap it, it opens and closes instantly. the same happens for the mute button toggle.
I'm completely at a loss.
I have done some javascript debugging throwing in a few alerts here and there, and the initialisation functions that create references to the canvas and so on are only called once.
I have read and heard about hardware acceleration causing issues, but solutions i've potentially found are only relative to building native apps! not HTML5 Canvas webpages.
Any insight on this could be would be great!
Thanks in advance.
--EDIT
I also put in this test alert(document.getElementsByTagName('canvas').length); to see if there was 2 canvas in the DOM but it returns 1!
I ran into this same issue. I was able to fix this by running the following code after making a change to my canvas:
// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {
// Tweak the canvas opacity, causing it to redraw
$('canvas').css('opacity', '0.99');
// Set the canvas opacity back to normal after 5ms
setTimeout(function() {
$('canvas').css('opacity', '1');
}, 5);
}
By tweaking the opacity, this forced the canvas to redraw and removed the duplicate shapes. It's a dumb fix but it works. Hopefully this helps someone.
Also you may look at this collections of such tips: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/
For double canvas issue there is a bug logged https://code.google.com/p/android/issues/detail?id=35474 you may want to check suggested solutions.
In my case this issue appeared only if I had Force GPU rendering enabled.
Issue usually appears if you have some parent element for canvas that has CSS overflow: hidden
remove overflow property from all canvas parents,probably we don’t need this property on touch devices:
$("canvas").parents("*").css("overflow", "visible");
It is well explained at http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/
Doing performance profiling using the chromium tracing panel I've found many image resizes, especially on scroll.
I've removed all (I think) of the image resizes from the front-end, and simplified the dom for testing purposes to be mostly just static image elements at this point.
I have a few theories:
All images resize/resample internally
looking at the chromium source, I've found evidence that everything is calling "NativeImageSkia::resizedBitmap"
Using a retina display mac causes the images to be sampled up
This is backed up by seeing a "dst_pixels" size 4x the src_pixels in the tracer
Can someone confirm or deny any of the above?
Also:
Is it possible to track down which image is being resized?
After working with some of the guys at google I've determined that this is in fact a webkit bug related to the handling of the high PPI monitors on the retina macbook pros.
You can see on a non-retina display (same mac, external monitor) there are only "Image Decode" events. Same content, same mac, rendered on the retina display you can see there are both "Image Decode" and "Image Resize" events.
Tested with 24 and 25.0.1329.0
Also, it is currently not possible to find out what image is being resized from the runtime instrumentation in chrome.