Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Photos not displayed properly.

  • 19 பதிலளிப்புகள்
  • 1 இந்த பிரச்சனை உள்ளது
  • 39 views
  • Last reply by cor-el

The latest version of Firefox (I have 77.0.1) has suddenly distorted some of the photos on my web page. For example, the first two photos on http://www.yonggee.name/Genera/Gongora.html at the top left have been stretched vertically. Notice the settings are 217px wide and 325px high. A number of other portrait photos are distorted in the same way.

This did not happen until a few days ago after an upgrade to Firefox. I have the same problem in Safe Mode and have Refreshed Firefox.

The problem does not happen in Microsoft Explorer or Microsoft Edge, so it is a Firefox problem.

What has happened? Is this a known error or something to do with the latest upgrade? Can I fix it or does Mozilla need to?

Roger

தீர்வு தேர்ந்தெடுக்கப்பட்டது

It looks that adding this rule is sufficient.

img {
	image-orientation: none;
}

Read this answer in context 👍 0

All Replies (19)

Hey, Roger

You can try to disable hardware acceleration in Firefox.

Options/Preferences -> General: Performance remove checkmark: [ ] "Use recommended performance settings" remove checkmark: [ ] "Use hardware acceleration when available" https://support.mozilla.org/en-US/kb/performance-settings Close and restart Firefox after modifying the setting to make the change effective.

https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems You can check if there is an update for your graphics display driver and check for hardware acceleration related issues.

https://support.mozilla.org/en-US/kb/upgrade-graphics-drivers-use-hardware-acceleration

Helpful?

None of that made any difference and everything was up to date.

Helpful?

Try disabling graphics hardware acceleration. Since this feature was added to Firefox, it has gradually improved, but there still are a few glitches.

You will need to restart Firefox for this to take effect so save all work first (e.g., mail you are composing, online documents you're editing, etc.).

Then perform these steps:

Click the menu button New Fx Menu and select Options on Windows or Preferences on Mac or Linux. Select the Advanced panel and then the General tab. Uncheck Use hardware acceleration when available. Restart Firefox and see if the problems persist. Did this fix your problems? Please report back to us!

If the problem is resolved, you should check for updates for your graphics driver by following the steps mentioned in these Knowledge base articles:

https://support.mozilla.org/en-US/kb/upgrade-graphics-drivers-use-hardware-accelerationhttps://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems#w_turn-off-hardware-acceleration Thank you.

Himanshu prabhakar மூலமாக திருத்தப்பட்டது

Helpful?

See earlier. No difference.

Helpful?

If I check this in the Inspector then it looks that width and height are swapped, so something wend wrong with adding the width and height properties to your file (you use inline style rules).

You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.

cor-el மூலமாக திருத்தப்பட்டது

Helpful?

Thanks.

As you indicate, the width and height are specified in the html correctly but the photo is distorted. I attach a 'Correct' view of the page from my composer software, the 'Distorted' view in Firefox and the original of the first photo (which of course has the correct size).

The distortion is not a 90 degree rotation but as you indicate may be reversal of the width and height. But how can that be when they are clearly specified in the html?

Roger

Helpful?

This is interesting: Firefox shows the first two images the way I see them if I save them and open them in Paint, but Edge rotates them 90 degrees counterclockwise to a portrait orientation. Even if I open just the image without the page, it's rotated in Edge:

http://www.yonggee.name/Genera/Photos/DSC00890.JPG

I have no idea what is causing that.

Chrome behaves like Firefox, so it must be some secret sauce in Microsoft browsers?

Helpful?

Taking another look, you were right. The photos HAVE been switched 90 degrees and then displayed according to the specified dimensions. So how has that happened?

Helpful?

They are (and should be) portrait.

I believe there is a Chinese curse translated as 'may you live in interesting times'!

Any suggestions?

Helpful?

GIMP shows in the EXIF data: "Orientation: Tight-top" and asks to rotate the image to standard orientation.
This assumes that the camera was rotated when the picture was taken.

cor-el மூலமாக திருத்தப்பட்டது

Helpful?

See also:

  • Bug 1566316 - HTMLImageElement naturalWidth/naturalHeight does not account for image orientation

Helpful?

Thanks. I can see it is talking about the sort if issue I have. However, I don't entirely understand either of the links you show.

(1) Why has it suddenly changed? Prior to this week all the images were fine.

(2) You will see on www.yonggee.name that we have nearly 10,000 photographs online. Only some are not showing correctly (possibly only some portrait ones but I am not sure). Is there some process I can use to correct them all? Will it just put them back to the camera orientation (which may or may not be correct, depending on how the photo was taken) or can I tell it to specify the orientation of the photos as I have them on my computer (which can then be uploaded again)? Clearly it needs to be a bulk process and one that I don't have to choose which photos.

But really it is (1) which is so annoying.

Helpful?

This pref got changed in Firefox 77.

  • layout.css.image-orientation.initial-from-image = true

If I set the pref to false on the about:config page then I get the correct orientation.

  • layout.css.image-orientation.initial-from-image = false

  • Bug 1616411 - CSS decorative images should respect EXIF-orientation by default [77]

There are two other prefs dealing with the orientation:

  • image.honor-orientation-metadata
  • image.honor_orientation_metadata.natural_size

Helpful?

Thanks, cor-el. I think I am getting close.

.................I have a css file in the root of the website which includes entries such as:

body {

 border-style: hidden;
 font-family: Arial,Helvetica,sans-serif;
 font-style: normal;
 color: #ff84c6;
 line-height: 100%;
 background-color: black;
 font-weight: bold;
 font-size: medium;

} a:link {

 font-size: normal;
 font-weight: bold;
 line-height: 100%;
 color: #ff8000;
 font-style: normal;
 font-family: Arial,Helvetica,sans-serif;

}

............................................................... I have tried adding an entry such as:

layout {

 image-orientation.initial-from-image=false

}

.............................................................. or

image {

 image-orientation.initial-from-image=false

}

........................... But neither make any difference. Am I on the right track and what should the entry in the css file be?

Helpful?

image-orientation.initial-from-image=false is a setting change you make on the about:config page and not via a CSS file.

Helpful?

Yes I got to that page but I couldn't understand how the entry in the css file was supposed to be structured; hence the attempts in my previous post.

Can you tell me exactly what the css file entry should look like?

Helpful?

தீர்வு தேர்ந்தெடுக்கப்பட்டது

It looks that adding this rule is sufficient.

img {
	image-orientation: none;
}

Helpful?

Brilliant! Take a medal! All fixed now thanks.

Helpful?

You're welcome.

Helpful?

கேள்வி எழுப்பு

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.