Søg i 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 svar
  • 1 har dette problem
  • 162 visninger
  • Seneste svar af cor-el

more options

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

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

Valgt løsning

It looks that adding this rule is sufficient.

img {
	image-orientation: none;
}

Læs dette svar i sammenhæng 👍 0

Alle svar (19)

more options

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

more options

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

more options

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.

Ændret af Himanshu prabhakar den

more options

See earlier. No difference.

more options

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.

Ændret af cor-el den

more options

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

more options

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?

more options

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?

more options

They are (and should be) portrait.

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

Any suggestions?

more options

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.

Ændret af cor-el den

more options

See also:

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

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.

more options

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
more options

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?

more options

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

more options

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?

more options

Valgt løsning

It looks that adding this rule is sufficient.

img {
	image-orientation: none;
}

more options

Brilliant! Take a medal! All fixed now thanks.

more options

You're welcome.