Disable CSS transition when phone changes orientation (landscape/portrait)

Question

On my page I have a:

<div id="id_modal_background"></div>

that is between a modal login window and a background image. It's task is to (a) blur the background image once the modal login window is shown and (b) dismantle the blur when modal login window is closed.

In order for the blur to look nice it needs transition time of 1s, which is set in CSS like this:

#id_modal_background{
    z-index: 2;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: 1s;
}

But this transition time gives me side effects on phones where change of the orientation from landscape to portrait (but not vice versa) needs 1s to redraw the blur. And it doesn't looks nice.

I am using this function to draw (id_modal_background_visibility(1)) or dismantle (id_modal_background_visibility(0)) the blur:

function id_modal_background_visibility(a){

    let r = '';
    let m = document.getElementById('id_modal_background');

    switch(a){
        case 0:
            r = 'OFF';
            // In order to reference "backdrop-filter" we camelcase it!
            m.style.backdropFilter = 'blur(0px) grayscale(0)';
            m.style.visibility = 'hidden';
            break;
        case 1:
            r = 'ON';
            // In order to reference "backdrop-filter" we camelcase it!
            m.style.visibility = 'visible';
            m.style.backdropFilter = 'blur(15px) grayscale(0.25)';
            break;
        default:
            r = 'ERROR';
            m.style.visibility = 'hidden';
            break;
    }

    console.log('Modal background visibility: ' + r);
}

If anyone can help me to remove the transition time that happens at any kind of orientation change, but keep the transition time otherwise, I would be more than happy.

its way too big too read, please try shorting your question, will save all of us lot of time — Shreyan Mehta, Jan 13 '20 at 05:59
I figured out one part of the problem. If I isolate transition only to `backdrop-filter` by using `transition: backdrop-filter 1s;` instead of `transition: 1s;` the problem is gone, but new problem arizes, because now transition works on opening the modal login window, but it doesn't work on closing the window... — 71GA, Jan 13 '20 at 06:09

score 0 · Answer 1 · answered Jan 13 '20 at 06:11

0

You can make use of css media queries

@media (orientation: landscape) {

}

Read more here How to set portrait and landscape media queries in css?

answered Jan 13 '20 at 06:11

Sameer

4,758
3
20
41

I know about them, but they reference the position, while my problem happens on a **change** of position, so I am curious if you can provide a complete solution to this using `@media` selectors. – 71GA Jan 13 '20 at 06:13

score 0 · Answer 2 · answered Jan 13 '20 at 06:15

You can manage your code like below :

window.addEventListener("orientationchange", function() {
    if(window.innerHeight > window.innerWidth){
        console.log("Portrait");
    } else {
        console.log("Landscape");
    }
}, true);

And you can apply CSS class accordingly. Also media query CSS is a possible way for your problem.

Disable CSS transition when phone changes orientation (landscape/portrait)

2 Answers2