I just updated and now photos are fuzzy on a website.
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.)
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 👍 0All Replies (5)
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.
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.
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))
Tonnes, your response helped. I went into the settings of the plugin, and there was indeed a blur feature activated. Thank you sooooo much.
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. ;)