Trang web này sẽ có chức năng hạn chế trong khi chúng tôi trải qua bảo trì để cải thiện trải nghiệm của bạn. Nếu một bài viết không giải quyết được vấn đề của bạn và bạn muốn đặt câu hỏi, chúng tôi có cộng đồng hỗ trợ của chúng tôi đang chờ để giúp bạn tại @FirefoxSupport trên Twitter và /r/firefox trên Reddit.

Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

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

  • 5 trả lời
  • 1 gặp vấn đề này
  • 252 lượt xem
  • Trả lời mới nhất được viết bởi 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
Đính kèm ảnh chụp màn hình

Giải pháp được chọn

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.

Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (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

Giải pháp được chọn

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. ;)