0

I have a div with some styles and a fixed width for big screens :

.div {
    width: 1600px;
    transition: width 0.5s
}

And I am using media query with smaller fixed width for smaller screens :

@media only screen and (max-width: 1000px) {
    .div {
        width: 400px;
    }
}

My problem is when I enter to the website (not refresh), if the browser width is bigger than 1000px, the animation will fire up (the div get from 400px to 1600px) !

I tried to add the transition to the media query, but the transition will not work when I resize the browser (less than 400px to over 400px) which is normal.

I can't understand why the browser use styles inside the media query when it doesn't match the browser with !

Please check this URL with a very basic example :

https://octamerous-hunts.000webhostapp.com/

Update I just tested in Mozilla and Chrome and it work without problem, actually the problem occur only when I use IE and Edge !

The code :

<head>

    <style>

        .div1 {
            position: relative;
            width: 1400px;
            height: 200px;
            left: 50%;
            margin-left: -700px;
            background-color: royalblue;
            transition: width 0.5s, margin-left 0.5s;
        }


        @media only screen and (max-width: 1399px) {
            .div1 {
                width: 1000px;
                margin-left: -500px;
            }
        }

    </style>

</head>


<body>

    <div class="div1">



    </div>

</body>

Update 2

I found a similar question :

IE/Edge - CSS3 transitions firing on navigate

But the solution provided doesn't work !

Update 3

I found the solution :

IE11 triggers css transition on page load when non-applied media query exists

That fix the problem with IE and Edge !

Sinf
  • 123
  • 1
  • 4
  • 11
  • What do you mean when you enter the website(not refresh)? Going to the website and a refresh is essentially the same thing as far as your css is concerned. You are loading the page in both cases – Huangism May 23 '18 at 11:51
  • 1
    Please provide the HTML and CSS required to reproduce your problem, preferably in a Stack Snippet. – Hidden Hobbes May 23 '18 at 11:52
  • @Huangism well, I am agree with you, but when I refresh the page, everything is fine, when I enter the URL in a blank page and press enter, I will have this problem :S – Sinf May 23 '18 at 11:53
  • You will need to provide a url then, currently, there is no way for us to reproduce this – Huangism May 23 '18 at 11:57
  • 2
    @Huangism No. He must supply a complete representation here within the question, not a URI. That will only get this question closed. [mcve] – Rob May 23 '18 at 11:58
  • @Rob I already tried his scenario in a fiddle, I don't think this issue (if it is an issue) is reproducible using a code snippet – Huangism May 23 '18 at 11:59
  • @Huangism Then he's out of luck. – Rob May 23 '18 at 12:00
  • 1
    Then he can provide a snippet and an url – Huangism May 23 '18 at 12:03
  • as per your media query, your animation will work when you resize at 1000px not at 400px. – Zuber May 23 '18 at 12:05
  • @Zuber with the current provided code, the transition will occur resizing from big to small and small to big – Huangism May 23 '18 at 12:06
  • I try to add a URL with the code or an example at least (I am working on local and I don't have online URL and will not post all the codes online yet) – Sinf May 23 '18 at 12:07
  • 1
    @Soheyl you don't need post all the code, just post simplified example. Just post the `.div` with its related styles. the transition shouldn't occur when loading the page – Huangism May 23 '18 at 12:07
  • @HiddenHobbes I added a very basic example – Sinf May 23 '18 at 12:56
  • @Huangism I added a very basic example – Sinf May 23 '18 at 12:56
  • 1
    @Soheyl add the code to the question and vote for reopen. I opened your url in FF and chrome, no transition on load. What browser are you seeing this issue on? – Huangism May 23 '18 at 12:58
  • @Huangism IE and Edge, not tested in this browsers :S my bad, I will try now, How can I vote for reopening the question ? – Sinf May 23 '18 at 13:00

0 Answers0