noai.duckduckgo.com shows a HUGE duck

[Lucio Chiappetti]

Since a few days noai.duckduckgo.com shiws a huge duck logo on top, occupying 90% of the screen height.
I thought it was some temporary celebration or so, but I see it persists.
Is there a way toi reduce suche logo to a more human size ?

[vannilla]

The issue is an "unconstrained" SVG image.
In short, DDG needs to set the width and height attributes in the SVG element, but it does not.
Chrome probably has a quirk where it takes the viewBox attribute as a shorthand for width and height, which is technically incorrect, while Pale Moon (and UXP in general) rightfully tries to fill the entire available space with the contents of the SVG.

You can hack the site's style with e.g. Stylem to fix it by using the following snippet:

Code: Select all

[class*=logoIconWrap] {
  width: 128px;
  height: auto;
}

128 is the value specified in the viewBox so I suppose it's a good assumption to make about the intended result, but feel free to experiment as the actual value is irrelevant as long as it's an absolute value.

It is obviously the responsibility of DDG to explicitly set an appropriate width and height attribute, the above merely is a quick and dirty hack. Maybe you might want to get in touch with them?

[Moonchild]

Seem like it's an unconstrained SVG inside a flex wrapper. I've shot my DDG contact an e-mail because that seems to be a web design bug. Chrome will likely behave differently

EDIT: mid-aired with vannilla. I linked DDG the analysis above in a follow-up.

[Tharthan]

You can hack the site's style with e.g. Stylem to fix it by using the following snippet:

Code: Select all

[class*=logoIconWrap] {
  width: 128px;
  height: auto;
}

I've never used Stylem before. Would something like this work with Greasemonkey?

If so, how would I set it to apply to noai.duckduckgo.com ?

[jobbautista9]

Greasemonkey can't directly apply CSS; it only does JavaScript. You can change the width attribute of the logo SVG though with this one-liner when you create a new userscript:

Code: Select all

document.querySelector("svg[class*=logoIcon]").setAttribute("width", 128);

[Lucio Chiappetti]

I just placed the code in chrome/userContent.css in my profile

[Mæstro]

Seem like it's an unconstrained SVG inside a flex wrapper… that seems to be a web design bug.

Is it related to the general one which I reported about a fortnight ago? I have got Signor Chiappetti’s problem also, and supposed so.

[fatboy]

Huge is an understatement, that thing is bigger than the eiffel tower haha

[frostknight]

Since a few days noai.duckduckgo.com shiws a huge duck logo on top, occupying 90% of the screen height.
I thought it was some temporary celebration or so, but I see it persists.
Is there a way toi reduce suche logo to a more human size ?

When I try to load that url, it shows me nothing at all.

[Mæstro]

On the No ÀI subdomain, I have µBlock configured to permit first-party scripts, including inline, I had the same problem as in the original post. Likewise, Shinki’s user script (or rather, second-party script) works for me. I would be curious to how to adapt this script to deal with my other oversized SVG icons.

[Tharthan]

I'm still confused. The code that is being presented to me looks generic enough that it could apply to any SVG image, not just the one on noai.duckduckgo.com. I say that because I see no mention of noai.duckduckgo.com in the code.

So my question is:

1. Is Stylem the only thing that can fix this issue? If not, what do I need to put into Greasemonkey in order to fix the issue?

2. What code do I need in order to have whatever the fix is apply specifically to noai.duckduckgo.com?

[frostknight]

Hmmm I must be the only one who visits that page and I see absolutely nothing when I type in that link. lol.

Maybe its because I am not typing in a search though...

That happens to em when I use duckduckgo at all.

[vannilla]

I'm still confused. The code that is being presented to me looks generic enough that it could apply to any SVG image, not just the one on noai.duckduckgo.com. I say that because I see no mention of noai.duckduckgo.com in the code.

So my question is:

1. Is Stylem the only thing that can fix this issue? If not, what do I need to put into Greasemonkey in order to fix the issue?

2. What code do I need in order to have whatever the fix is apply specifically to noai.duckduckgo.com?

It targets a specific component of the page, you can't move it around without modifying it.
Stylem is the most convenient, you can use userContent.css too. I advise against Greasemonkey because it's worse even though it works.

If you don't want to install Stylem look up a tutorial on using userContent, I think there is at least one on this forum too. Otherwise, if you have stylem navigate to the website and click the Stylem toolbar button, there's a menu entry to create a style for the whole site. When you click it the extension will generate a CSS for you where you can paste the snippet of code above, inside the block delimited by braces.

[Behemot]

Isn't it actually better to write to them duck ppl so they fix it on their side (which is the correct one for the fix)? I'd expect duck ppl in particular to actually listen to feedback

[Moonchild]

I've been trying to get a response from my contacts at DDG but nothing so far.

[Mæstro]

Some users here have indeed written the webmaster about this problem, but as I have noted a few times by now, oversized vector icons can appear often on websites with less understanding administrators. Client-side remedies have still got their place.

[adoxa]

Here's another approach to fix it, by using a Modify HTTP Response filter to remove clamp.

Code: Select all

[["noai.duckduckgo.com",["/\\.css$/",["/clamp\\(.*?,(.*?),.*?\\)/g","$1"]]]]

[Moonchild]

It was picked up with some delay and apologies, but they jumped right on it once it was on the right desk and should now be fixed on DDG's end.

[Mæstro]

[It] should now be fixed on DDG's end.

Can confirm! I removed the user script, and the logo now renders properly for me.
Now, I wonder about the more general problem of how to deal with my other oversized SVG icons, on other sites where CSS and JS are disabled…

[Lucio Chiappetti]

removed (commented out) in userContent and site works
View Source shows most (all?) SVG have a viewbox