Closed Bug 1940617 Opened 29 days ago Closed 17 days ago

@media does not work at breaking point: all images are displayed despite the "display:none"

Categories

(Core :: CSS Parsing and Computation, defect)

Firefox 133
defect

Tracking

()

RESOLVED INVALID

People

(Reporter: sebastjava, Unassigned)

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Steps to reproduce:

I first encountered this problem on my future WordPress site, with the Twentig plugin and its responsive design features. But, to properly isolate the problem, and make sure that the problem does not come from WordPress or its plugins, I did this little test: (also included as a file attachment...)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
@media (max-width: 767px) {
.tw-sm-hidden {
display:none !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.tw-md-hidden {
display:none !important;
}
}
@media (min-width: 1024px) {
.tw-lg-hidden {
display:none !important;
}
}
</style>
</head>
<body>

<h3>3 pictures sizes, one for each: desktop, tablet, mobile</h3>

<img src="https://picsum.photos/id/26/900/600" alt="" width="900" height="600" class="tw-sm-hidden tw-md-hidden">
<img src="https://picsum.photos/id/26/600/400" alt="" width="600" height="400" class="tw-sm-hidden tw-lg-hidden">
<img src="https://picsum.photos/id/26/300/200" alt="" width="300" height="200" class="tw-md-hidden tw-lg-hidden">

</body>
</html>

Actual results:

I pressed Ctrl+Shift+M to get into Responsive Design Mode. When I hit the 1024px media width, all 3 images get displayed at the same time.

And this bug also occurs when I just resize my computer window and accidentally hit the exact 1024px width...

Expected results:

There are 3 images in my code. One large, one medium, and one small. I was expecting to get only one image displayed at once: one for computers, one for tablets, and one for mobiles.

It works as expected at every possible media size, except when I reach this exact 1024px media width.

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core

In concrete terms, all this means that I take my iPad mini tablet, turn it horizontally, and there, boom, I find myself with 2 or 3 logos instead of one, 2 or 3 photos on my landing page, etc.

In short, on a screen or a window that is 1024 px wide, all the responsive design is ruined and the page is a mess of images...

Summary: @media does not work at 1024px width: all images are displayed despite the display:none → @media does not work at breaking point: all images are displayed despite the "display:none"

This is expected given how fractional pixel scales work?

Due to silly issues you can't trivially see the real viewport size using window.innerWidth (see this issue), but you can with something like this in the console:

let div = document.createElement("div");
div.style = `inset: 0; position: absolute;`;
document.body.appendChild(div);
console.log(div.getBoundingClientRect());

At some DPIs, your viewport size could be 1023.3333px, which causes what you're seeing. We (and all browsers nowadays) support @media expressions that don't suffer from this, e.g. your example could be:

@media (width < 768px) {
  .tw-sm-hidden {
    display:none !important;
  }
}
@media (width >= 768px) and (width < 1024px) {
  .tw-md-hidden {
    display:none !important;
  }
}
@media (width >= 1024px) {
  .tw-lg-hidden {
    display:none !important;
  }
}

Which would always work.

Status: UNCONFIRMED → RESOLVED
Closed: 17 days ago
Resolution: --- → INVALID

The WordPress plugin is now fixed.
Thank You !

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: