wrong ion-hide css media queries

[martinkasa]

Bug Report

Ionic version:

[x] 4.2.0

Current behavior: Currently generated CSS:

.ion-hide {
    display: none !important
}
.ion-hide-up {
    display: none !important
}
@media (max-width: 575px) {
    .ion-hide-down {
        display:none !important
    }
}
@media (min-width: 576px) {
    .ion-hide-sm-up {
        display:none !important
    }
}
@media (max-width: 767px) {
    .ion-hide-sm-down {
        display:none !important
    }
}
@media (min-width: 768px) {
    .ion-hide-md-up {
        display:none !important
    }
}
@media (max-width: 991px) {
    .ion-hide-md-down {
        display:none !important
    }
}
@media (min-width: 992px) {
    .ion-hide-lg-up {
        display:none !important
    }
}
@media (max-width: 1199px) {
    .ion-hide-lg-down {
        display:none !important
    }
}
@media (min-width: 1200px) {
    .ion-hide-xl-up {
        display:none !important
    }
}
.ion-hide-xl-down {
    display: none !important
}

Either documentation is wrong or generated CSS. For example in docs is written:

.ion-hide-sm-{dir} | Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down). But mediaquery for .ion-hide-sm-down is @media (max-width: 767px).

Expected behavior: .ion-hide-sm-down should be @media (max-width: 575px).

Steps to reproduce: Just check generated CSS in whatever ionic v4 app.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/mka/.nvm/versions/node/v10.15.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.0

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 16 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/mka/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.15.0 (/Users/mka/.nvm/versions/node/v10.15.0/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2 Build version 10E1

[brandyscarney]

Thanks for the issue! I moved this to our ionic-docs repository as the code looks fine but the documentation needs to be updated. 🙂

[dkrahn]

IMHO I would think the code is wrong, because I think the main usage would be if screen below breakpoint show button A if not, show button B. This way it becomes more clear if you just change the {dir} part.

[brandyscarney]

Closing this as we're reworking the CSS to where the down will use the current breakpoint's minimum width here: https://github.com/ionic-team/ionic/pull/18601

[nickwinger]

for me this is still not working (having ionic version 4.11.10), when applying the ion-hide-sm-down css class i expect the element to be hidden under 576px like stated here: https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints

but it uses the md breakpoint pixels which is wrong...

this is the wrong css generated: @media (max-width: 767px) .ion-hide-sm-down { display: none !important; }

[brandyscarney]

@nickwinger This has been added for Ionic 5 since it can be considered a breaking API change, you can see this blog on our release candidate if you'd like to try it out early: https://ionicframework.com/blog/ionic-5-0-0-release-candidate/

[aacassandra]

media query not work on safari / ios virtual device (big sur)