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

I just updated and now photos are fuzzy on a website.

  • 5 replies
  • 1 has this problem
  • 252 views
  • Last reply by Tonnes

more options

I just updated today, and now the photos on the home page of a website I was working on are fuzzy. They are fine in Opera, Chrome, and Safari. Not sure what I can do about this, but just wondering if there are tricks or tips as to what I can do. (The photos are in a Wordpress Plugin named Unite Gallery Lite.)

https://chicagospiritualseekers.org

I just updated today, and now the photos on the home page of a website I was working on are fuzzy. They are fine in Opera, Chrome, and Safari. Not sure what I can do about this, but just wondering if there are tricks or tips as to what I can do. (The photos are in a Wordpress Plugin named Unite Gallery Lite.) https://chicagospiritualseekers.org
Attached screenshots

Chosen solution

What version did you update Firefox from before this started happening? If unknown, you can check the Update History in the Update Log as explained in the Advanced panel - Accessibility, browsing, network, updates, and other advanced settings in Firefox support article.

Additionally, I think there is nothing wrong with the images itself, as hovering them with your mouse in Firefox will probably "unblur" them, at least that’s what I see. Do you see the same?

Now I’m no expert on HTML, but found that if you "inspect the element" by hovering the first image for instance (for Community) and choosing Inspect Element using the context menu, that will open the Inspector and make you land on an item starting with

<div class="ug-thumb-overlay" style="opacity: 0; ... ...>

Further down, 3 lines below, you’ll see a line starting with

<div class="ug-tile-image-overlay ug-trans-enabled" style="opacity: 1; width: 300px; height: 145px;">

If you expand that line by double-clicking it, you’ll see the part

class=" ug-blur-effect ug-trans-enabled"

If you double-click that section or choose Edit as HTML in the context menu, then remove ug-blur-effect and press Return/Enter, the image will unblur right away.

<strike>I could not find anything related to where ug-blur-effect originates from, but think this is specific code offered to Firefox and by the website - someone else may be able to answer that.</strike>

Asked around a bit, and I was told the script containing the ug-blur-effect code originates from here, and of course belongs to the website itself. To summarize, the images are blurry because the site wants them to be blurry and it’s working as intended, at least for Firefox and perhaps not for other browsers. Technically (and I should be careful reproducing the reply as it’s not my cup of tea) there would be a difference in the svg handling, which has to do with roundings that other browser handle differently. If anyone likes to add more details about this, feel free.

The odd thing is, we are not aware of recent code changes affecting this behavior, and I could not reproduce "unblurred" images in other recent Firefox versions, so I’m curious about your previous version that actually "suffered" the issue of not showing blurred images when not hovering them.

If you think either the blurred images are disturbing even if intended (personally I think so), or this may involve something the website owner didn’t even notice because they might have tested in other browsers or don’t worry about (proper) display in Firefox or other browsers instead, you could ask them to revise/fix the page, or at least the blur code. Of course that could mean they will make the images to blur just as much for other browser when unhovered, which is up to them.

Read this answer in context 👍 0

All Replies (5)

more options

I looked at the site. While those pictures are out of focus, the other pictures on the site show properly.

It might be the pictures themselves are bad. Contact support for that site.

more options

Chosen Solution

What version did you update Firefox from before this started happening? If unknown, you can check the Update History in the Update Log as explained in the Advanced panel - Accessibility, browsing, network, updates, and other advanced settings in Firefox support article.

Additionally, I think there is nothing wrong with the images itself, as hovering them with your mouse in Firefox will probably "unblur" them, at least that’s what I see. Do you see the same?

Now I’m no expert on HTML, but found that if you "inspect the element" by hovering the first image for instance (for Community) and choosing Inspect Element using the context menu, that will open the Inspector and make you land on an item starting with

<div class="ug-thumb-overlay" style="opacity: 0; ... ...>

Further down, 3 lines below, you’ll see a line starting with

<div class="ug-tile-image-overlay ug-trans-enabled" style="opacity: 1; width: 300px; height: 145px;">

If you expand that line by double-clicking it, you’ll see the part

class=" ug-blur-effect ug-trans-enabled"

If you double-click that section or choose Edit as HTML in the context menu, then remove ug-blur-effect and press Return/Enter, the image will unblur right away.

<strike>I could not find anything related to where ug-blur-effect originates from, but think this is specific code offered to Firefox and by the website - someone else may be able to answer that.</strike>

Asked around a bit, and I was told the script containing the ug-blur-effect code originates from here, and of course belongs to the website itself. To summarize, the images are blurry because the site wants them to be blurry and it’s working as intended, at least for Firefox and perhaps not for other browsers. Technically (and I should be careful reproducing the reply as it’s not my cup of tea) there would be a difference in the svg handling, which has to do with roundings that other browser handle differently. If anyone likes to add more details about this, feel free.

The odd thing is, we are not aware of recent code changes affecting this behavior, and I could not reproduce "unblurred" images in other recent Firefox versions, so I’m curious about your previous version that actually "suffered" the issue of not showing blurred images when not hovering them.

If you think either the blurred images are disturbing even if intended (personally I think so), or this may involve something the website owner didn’t even notice because they might have tested in other browsers or don’t worry about (proper) display in Firefox or other browsers instead, you could ask them to revise/fix the page, or at least the blur code. Of course that could mean they will make the images to blur just as much for other browser when unhovered, which is up to them.

more options

You may have accidentally zoomed web page(s). Reset the page zoom on pages that cause problems.

  • View -> Zoom -> Reset (Ctrl+0/Command+0 (zero))
more options

Tonnes, your response helped. I went into the settings of the plugin, and there was indeed a blur feature activated. Thank you sooooo much.

more options

Oops, I only just noticed it was the site you were working on yourself, sorry I missed that part. Glad to see it helped though, thank you for fixing this and clarifying the cause. ;)