@media does not work at breaking point: all images are displayed despite the "display:none"
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: sebastjava, Unassigned)
Details
Attachments
(1 file)
829 bytes,
text/html
|
Details |
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.
Comment 1•29 days ago
|
||
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.
Reporter | ||
Comment 2•27 days ago
|
||
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...
Reporter | ||
Updated•22 days ago
|
Comment 3•17 days ago
|
||
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.
Reporter | ||
Comment 4•10 days ago
|
||
The WordPress plugin is now fixed.
Thank You !
Description
•