phanpy

phanpy copied to clipboard

Describe the bug

Since a few weeks, I noticed that some posts in the boot carousel are very blurry. Often, this affects posts at the beginning of the carousel. When I scroll horizontally, later posts are sharp/clear. It looks like a rendering/scaling issue. I’m on Firefox (Ubuntu).

• Which site: phanpy.social
• Which instance: mstdn.social

To Reproduce Steps to reproduce the behavior:

1. Go to Home Feed
2. Scroll down to a boost carousel
3. Some of them (but not all) show in a blurry way.

Expected behavior

The boost carousel cards should display the same sharpness like the rest of the site/posts.

Screenshots

Compare the boost carousel (esp. the 3rd post) and the posts above and below to see the difference in sharpness.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Firefox
• Version: 117

Additional context

I noticed the problem for a while now, but I don’t think it was always there from when I started using Phanpy. So it might be a bug introduced at a later point.

@frederik-elwert is it possible to try this in another browser and see if the same bug happens? Thanks.

@cheeaun The same thing actually happens in Chromium, so it doesn't seem to be Firefox specific.

I've just tried this on Firefox 119.0 Ubuntu 22.04.3 LTS, running inside Parallels Desktop on macOS, and unable to reproduce the bug unfortunately 😩 I'm not sure if could be related to graphics driver or display resolution issue (or something else?)

To set expectations, this will be a little difficult to fix. From my experience, this is pretty much a browser or OS-level bug that somehow I manage to hit the jackpot and trigger on Phanpy, by using quite a combination of fancy CSS 😅 (I'm aware that I'm pushing the limits in some parts of Phanpy's UI)

As I'm unable to see what you see, it would be useful if you could debug this on your machine, though may require web dev skills and perform debugging know-hows like:

1. Open devtools and inspect the carousel
2. Disable specific CSS styles, suspiciously the gradients and background blurs
3. Test them out for a while and observe if the visual glitch happens

Yes, I absolutely understand that this is tricky to replicate and debug. (Even when I’m doing a screenshot with Firefox’s built-in tool, that screenshot doesn’t show the blur.) At least having been able to show this in Chromium seems to indicate that it’s not just a one-off glitch.

I’ll try around a bit, but I haven’t found a single rule that might be causing this. (Which also gets complicated by the fact that in Firefox the blur is gone once I open the dev tools.)

Anyway, thanks for your effort, and then at least there’s a future reference if someone else encounters the same issue.

So, I've also got this on my work box, which is Edge on Mac.

It seems to be caused by this rule:

If I toggle border-top-right-radius off, the blur goes away (I selected the toplevel timeline-item-carousel and first tried just removing that class, which did fix it (and screw up layout), so then I tried toggling settings that matched timeline-item in some way or another. This one, for some strange reason, did the trick).

Before toggling the rule off:

After:

To me it seems like this Chromium/Blink bug: https://issues.chromium.org/issues/41321934

If I, instead of disabling that rule, add "overflow:visible;", the blurryness also goes away (but that does mess up the design: )

Workaround bookmarklet:

(() => {
    let e = document.createElement('style');
    e.setAttribute('type','text/css');
    e.innerText = '.timeline-item-carousel { overflow: visible !important; }';
    document.querySelector('head').appendChild(e);
})();

Minified and ready to add as a bookmark (Github issues doesn't support javascript: links for fairly obvious security reasons):

javascript:void%20function()%7Blet%20e=document.createElement(%22style%22);e.setAttribute(%22type%22,%22text/css%22),e.innerText=%22.timeline-item-carousel%20%7B%20overflow:%20visible%20!important;%20%7D%22,document.querySelector(%22head%22).appendChild(e);%0A%7D();