What has happened with code that now SOME right side up images are displaying online upside down even when the code is exactly the same for all images?
I have been a web designer for a million years and I have never had this happen before. I've got it on 2 websites with different code. 1 is just an img tag and the other is an animated gallery. In both cases SOME photos are displaying upside down while others are not, and they are all right side up in real life on the computer.
The upside down thing is happening in Chrome and Safari but not on the iPhone.
Here's code:
Could not possibly get any simpler.
<body class="loading">
<div class="page">
<img src="images/Ralphs-sons.jpg" alt="family portrait painting of kids" border="0">
Is there a code to lock the orientation so it cannot be flipped by whatever insanity the gurus who break the wheel have done now?
I saw a post about orientation but it didn't make sense for this since I am not doing anything special here and that code was supposed to be to fix a problem in only one web browser, not lock it for all browsers...
I solved the problem with a workaround. I opened the image in Photoshop and saved it from Photoshop so that it is no longer merely recognized by browsers as a photo saved from a camera.
Related
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
after visiting a website for a long time, and leaving another open during that time, it seems that the layout of the first, appears on the second. It happens mainly when using chrome, but once the issue appears on chrome, it is as if it stays in memory, and happens in firefox too. I read about memory leaks, but I am not sure that this is the issue, and if I am the only one that has it. I mainly see it happening on the website that I am working on which is why it is an issue, but it happens on the black bars of facebook, and another website called jeuxvideo.com . (This is the template my website uses: http://themes.alessioatzeni.com/html/brushed/).
Here is an image showing the issue, where the layout of youtube overlays another website (the transparent grid you can see over the rest of the website):
http://i.imgur.com/FQW7Jin.jpg
Is this a bug with chrome? Because I have looked everywhere and it doesn't seem that anyone else has this issue, or maybe it is just my computer?
This is probably image persistence, where the colours in the monitor get "stuck" temporarily after being on or off for a long time. The fix would be to upgrade the monitor.
You could confirm this by taking a screenshot while the problem is happening. If you don't see it in the screen shot (try moving the screenshot around the monitor when you see the problem, do the affected areas of the screen move too? or are the artefacts stuck in place?) then the problem is with the hardware.
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.
Mine is something of a newbie question which I'm hoping someone can shed some light on.
I have a table of contents on my page, with titles which link to sections further down the page.
the targets are created like this;
<a name='appendix'>Appendix</a>
and the links are created like this;
<a href='#appendix'>Jump to Appendix</a>
Now when you tap on the link in iphone safari, it takes you straight there no problem. However if you scroll back to the top, to the ToC, and tap the same link again, the browser does nothing.
Looking at the url I can see #appendix on the end and I assume that tapping the link again, the iphone believes its already at that link, since the url already has #whatever on the end.
Normally I'd be happy to leave it that, but the iPad, Android and Blackberry all behave as I'd expect, ie no matter where you are on the page or whether you'd tapped on the same link previously, they jump to the target section.
One thing I'm thinking about trying is embedding the whole page in a frameset so its url never changes, although being a noob I've no idea whether that'll even work.
Has anyone come across this before? Any ideas?
Thanks
This appears to be an issue with iOS not you. If it has been working on all other devices I am afraid there is nothing you can do except report it to Apple. However, has your iPhone been acting crashy lately, and have you tried it on other iPhones?