1

I've built a simple dialog/popup using CSS.

Its initial state (when closed) has opacity: 0.

When the dialog is open (using :target) I set opacity: 1.

I'm using transition: opacity 2s to make the transition smooth.

I've used this dialog CSS for years, but noticed today that on page load Chrome transitions the dialog from opacity: 1 to its initial state of opacity: 0.

This did not happen before.

It does not happen if I put the CSS in the HTML inside a style element.

Why is this happening? When did it start happening (in what version of Chrome?) It's clearly a bug (in Chrome/Webkit) as far as I can tell? How can I stop it from happening? (I'm on 86.0.4240.75 btw)

Example with external stylesheet where you can see the bug

Example with style element where the bug does not occur

(Note that you may need to do a hard refresh to experience the bug)

The CSS in question;

div.dialog {
    /* Size - not too wide, not too tall */
    box-sizing: border-box;
    width: 90%;
    max-width: 40rem;
    max-height: 90%;

    /* Position on top of everything */
    position: fixed;
    overflow: auto;
    z-index: 101;

    /* In the center of the viewport */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* For looking "good" */
    background: white;
    padding: 3rem;
    border: 1px solid black;

    /* When closed */
    /* NOTE: This is where things go wrong, even though opacity: 0; is set here initially, for some reason Chrome renders the element with opacity: 1 and then transitions to 0, this does _not_ happen if this CSS is inside a style element */
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease;
}

/* When open */
div.dialog:target {
    pointer-events: all;
    opacity: 1;
}

Edit: I added a {color: red; transition: color 2s} to the stylesheet now too. Same thing happens with the link, it transitions from blue/purple (if you've visited it) to my specified red on page load.

Edit: https://bugs.chromium.org/p/chromium/issues/detail?id=1136630

powerbuoy
  • 12,460
  • 7
  • 48
  • 78
  • Does this answer your question? [Stop CSS transition from firing on page load](https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load) – I_love_vegetables Jun 13 '21 at 07:36

1 Answers1

0

It is duplicated with this question

you can solve this problem with just adding an empty script tag to html. But you should append a character at least.

<script> </script>
Click
  • 1
  • 1