I have a very long vertical sprite which i am loading in my web application.
But unfortunately in windows 8 mozilla browser my sprite doesnt load entirely.
It loads upto a fixed height and ignores the remaining part of the image.
Every time i clear the cache or refresh it load upto that the specific height and ignores the remaining part of the image.
Can anyone give me a reason and the solution to this problem ?
The same sprite image loads absolutely fine in other browsers and also in mozilla (same version) in windows 7.
I find this issue only in Mozilla for windows 8.
Large images is a known issue for Mozilla: https://support.mozilla.org/en-US/questions/973667
I don't know if that one qualifies, or the reasoning for having a long one, but I would suggest just going wider, cutting the length down.
Column 1 10px wide 7,000 high, column 2 10x wide, 7,000 high.
Related
I have website which is having layout issues on certain devices which I believe I've tracked down to high res displays which also have the display scaling in windows 10 set to 200%. (not 200% in the browser, but in the display settings in the Windows Control Panel)
The problem is I don't have a device which can duplicate the resolution of these devices, which is 2736 x 1824 (it's a MS Surface Pro). Oh yeah, this only happen with Edge...
I know of sites which have VMs which will run different browsers for testing purposes, but I don't know of any which allow you to choose your resolution. Without going out and getting a hold of this specific machine, how else can I debug this issue?
You could create a custom device in the developer console, and simply display it at whatever scale actually fits on your screen. For instance, create a custom device with that particular resolution, then in the developer console on Chrome you can view it scaled down 50% (if your own resolution is 1920x1080) so that the whole thing is visible.
Turned out none of the emulation/scaling options in the dev console would emulate what was really happening. I ended up remoting into the customer's computer so I could do my own debugging on there and resolved the issue.
Seems like Edge v 44 was computing some CSS calc function for a div height incorrectly (off by 1 or 2 pixels) which was making some divs push out and mess up the layout.
The fix was to tweak the CSS so the calculation wasn't required.
I recently made a logo for my website with a resolution of 400x400. It scales down to 40x40 just fine in any other browser I have tested, but it acts weirdly in Edge. Every time I refresh the page, it renders properly for a split second, before changing to an ugly, pixelated look after the page completes loading.
How it looks before the page loads fully (and how I want it to look):
How it looks when page finishes loading:
HTML:
<img src="/images/logo.png" class="logo">
CSS:
.logo {
width: 40px;
height: 40px;
}
EDIT: Here's a JSfiddle to reproduce my problem.
Poor-quality downscaling of images is a known problem in Edge, and has been for years now.
I can confirm your experience of seeing a brief flash of smoothly-rescaled image, too. And sometimes, just sometimes, an image seems to remain smoothly scaled! (It seems that one way to definitely re-create the problem is to re-size an image after the page is loaded, such as setting the size in your JSfiddle to 50x50px -- in Edge, the image resizes and looks awful, but in other browsers the result is smooth.)
The issue actually pre-dates the release of Edge. Recently MS seem to have fiddled with it, but they've certainly not fixed it. Here's a thread on an MS forum about it (note how some people are bizarrely desperate to wish the problem away, blaming it on graphics cards!): https://social.technet.microsoft.com/Forums/ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-explorer-image-renderengine
Here's another post from August 2015 about this issue, so it's definitely nothing new! https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal
Really digging into the history, here's another demo -- from 2013! https://bug486918.bmoattachments.org/attachment.cgi?id=428179
(That demo is from a comment on a MS blogpost from 2013: https://blogs.msdn.microsoft.com/ie/2013/09/12/using-hardware-to-decode-and-load-jpg-images-up-to-45-faster-in-internet-explorer-11/ so it's been talked about for at least four years now!)
This same issue has been reported and confirmed as a bug by the Edge team twice, since at least November 2016, with no fix...
1 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9869140/
2 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14420925/
And there are several other posts about it here on SO.
The one possible solution seems to be rather OTT, adding the image to a canvas and rescaling that, but if you've got more than one or two images, this can cause serious lag: https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki
The only real solution seems to be to wait until MS fix this. Taking bets now on which year that will be!
I had a bit of improvement with my PNGs when I converted them to use the RGB color mode (used GIMP). It previously used 'indexed' colors.
I've found a workaround for this,
Edge down-scales the image when the size is large,
if we resize the image based on the actual size required the pixelation will be gone/reduced
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
I don't know if this is a bug or if it just needs to be called a rendering issue, but it's annoying.
If you have a 3d translated object, within that you have a scaled object, if that scaled object exceeds a certain size it just disappears. This is what I mean: http://dabblet.com/gist/4563584 (hover the a and wait to see it disappear)
I googled and searched a lot, but to no avail.
You might think: why? Because I am making an impress.js slideshow, and it needs to zoom a lot, but when using 3d transforms to hardware accelerate, object are cached as an images to save memory or something, I get that, but the big one is still visible when completely zoomed in, and it gets blurry (because it's cached at a small size), scaling and zooming out fixes that problem, but then it disappears...
I haven't found any other way to fix the blurry text issues without the scale, any help on that is also welcome.
Using google chrome 24.0.1312.52
Firefox 16.0.2 is working fine
Yeah it's a Chrome bug, doesn't happen in Firefox/IE/Safari. Been around for a while.
The issue has been reported to Chromium several times, here's the most recent one:
https://code.google.com/p/chromium/issues/detail?id=337493
I am optimizing my site for these higher resolution monitors (especially the new iPad). I have the site formatted the way I want, and I was just increasing the resolution of each image but still constraining it to the DIVs that I currently have. For example, I have an image with a resolution of 483x246 and I have it fitting a DIV with a set size of 188x96.
The images look great on Chrome, Firefox, and most importantly on the new iPad. Even zoomed in it's nice and crisp (as opposed to my old 188x96 image that looked blurry and pixelated when zoomed in)
The problem comes in when I open the page in IE. It displays the image at the correct size but it's jagged. See link to comparison below. I know it's an issue with the way IE resizes and renders pictures on the fly.
My question would be, is there a way to make IE display the picture nicely? If not, is there a way I can put in the code so that if it detects IE, it displays my old low res image? I've looked everywhere but haven't found anything that relates to my specific problem. I know this is a small example but my bigger images do the same thing and are more noticeable. I hope you all can help. Thanks. :)
Comparison:
Have you tried putting this in your CSS?
img { -ms-interpolation-mode: bicubic; }
There's also this https://github.com/adamdbradley/foresight.js which looks very interesting
Make sure IE9 isn't in compatibility mode or IE7/8 mode...
The reason this happends if because the bitmapdata is actually rendered completely different in the IE browser, the thing IE does is it "cuts" away pixels over a set ratio so like every 5 pixels it yanks a pixel and therefor makes it look like it misses certain gradient properties.
not much you can do about this except for keeping the aspect ratio set but I guess you would've known that by yourself already