dagospia.com: strange image overlay

[back2themoon]

Example: https://www.dagospia.com/media-gallery/ ... 46/2276276

Result:

Dagospia not expected.png

Expected:

Dagospia expected.png

Error Console:

Error: [Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIWebProgress.DOMWindow]" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "JS frame :: chrome://browser/content/browser.js :: onStateChange :: line 11162" data: no]

[therube]

(I'll just confirm the issue.)

[Kris_88]

The CSS aspect-ratio property does not work correctly.

Code: Select all

<a href="/media-gallery/alessandro-di-battista-515846/1909339" class="carousel-control right"><img src="https://static.dagospia.com/img/icons/circle-chevron-right.svg" alt=""></a>

.gallery .img-gallery-wrapper .carousel-control {
    aspect-ratio: 1;
...
}

[andyprough]

This Modify HTTP Response filter seems to work:

Code: Select all

[
  ["www.dagospia.com",["/.*/",["</head>","<style id=\"pm-dagospia-carousel-fix\">.gallery .img-gallery-wrapper .carousel-control{width:32px!important;height:32px!important;aspect-ratio:auto!important}.gallery .img-gallery-wrapper .carousel-control img{width:32px!important;height:32px!important}</style></head>"]]],
  ["dagospia.com",["/.*/",["</head>","<style id=\"pm-dagospia-carousel-fix\">.gallery .img-gallery-wrapper .carousel-control{width:32px!important;height:32px!important;aspect-ratio:auto!important}.gallery .img-gallery-wrapper .carousel-control img{width:32px!important;height:32px!important}</style></head>"]]]
]

This is a temporary CSS override that replaces the site’s aspect-ratio: 1 sizing with explicit width/height fixes the problem.

[Moonchild]

Question: How is "1" a valid aspect ratio? It's not a ratio if you only have a single value.

[andyprough]

Question: How is "1" a valid aspect ratio? It's not a ratio if you only have a single value.

Here's the MDN on it:

The <ratio> is the ratio of the width and height, in that order. It is represented by two positive <number> values separated by a forward slash (/) or a single <number>. When a single number is used, it is the same as writing the ratio as <number> / 1, which is also the width divided by the height.

So I guess 1 is an aspect ratio of 1/1 in CSS terms?

[Moonchild]

So I guess 1 is an aspect ratio of 1/1 in CSS terms?

Why even use it, in that case?

[andyprough]

Why even use it, in that case?

I don't know, I was going through this with AI step by step and trying to learn what I could from reading the MDN source documents, and it resulted in a workable Modify HTTPS Response filter, but I don't know why CSS aspect ratio is the way that it is. I think that is something you would be the expert in.

Does that answer your question to me, or were you asking a different question?

[back2themoon]

Thanks all for the help. Got an emergency and will probably be away for a while

[Goodydino]

What is the yellow overlay over the top picture?

[adoxa]

Kris was right - it seems aspect-ratio on the a is not applied correctly; here's a userstyle to fix it.

Code: Select all

@-moz-document domain("www.dagospia.com") {
  .carousel-control {
    aspect-ratio: unset !important;
  }
}

According to Firefox the other images should also be square - width 100%, aspect-ratio 1, thus height should be the same as width.