Top border of button shows briefly on startup

[BeccaK8]

What's the problem you're trying to solve?

When the game starts up, the "Guess" button is hidden until the user enters a complete word. However, the top line of the button displays briefly and eventually disappears. I just don't understand why only the top border of the button displays briefly, while the rest of the button is hidden from the start.

Post any code you think might be relevant (one fenced block per file)

        <!-- button: will be used for both Guess and Play Again -->
        <div class="button"></div>

* {
    font-family: Calibri, Helvetica, sans-serif;
    box-sizing: border-box;
    transition-property: all;
    transition-timing-function: ease;
}

.button {
    font-weight: 100;
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(89, 89, 89, 0);
    outline: 1px solid; 
    outline-color: rgba(0, 0, 0, .5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);

    color: rgb(89 89 89);
    cursor: pointer;
    line-height: 45px;
    margin: 2vmin 0 2em;
    max-width: 170px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    letter-spacing: 0;
    text-align: center;
}

// Render the button: "GUESS" if user has more tries or "PLAY AGAIN" if they lost
function renderButtons() {

    // if user wins or loses, set the id and text of the button to "Play Again"
    if (isGameOver()) {
        buttonEl.style.visibility = 'visible';
        buttonEl.innerText = 'Play Again';
        buttonEl.id = 'play-again';
    } else if (guessComplete) {
        // if the guess is complete, set the id and text of the button to "Guess"
        buttonEl.style.visibility = 'visible';
        buttonEl.innerText = 'Guess';
        buttonEl.id = 'guess';
        // if the guess is complete, add a class that changes the button colors to entice them to enter their guess
        if (guessComplete) {
            buttonEl.classList.add('guess-complete');
        } else {
            buttonEl.classList.remove('guess-complete');
        }
    } else {
        // hide the button if there's no action to be performed
        buttonEl.style.visibility = 'hidden';
    }
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

Line just shows briefly - it's not impacting the game function but it's frustrating why only the top line is there

What is your best guess as to the source of the problem?

I'm pretty sure the problem is with the transition css on the button:

    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);

What things have you already tried to solve the problem?

I've commented out the above transition statement and that solves the problem which I will do as a last resort, but I'd like to understand why it's just the top bar impacted

Paste a link to your repository here

https://github.com/BeccaK8/whats-the-word

[BeccaK8]

I've narrowed it down to the below style tag on button by increasing the transition time so I could use Chrome's developer tools to see which one was causing the line.

outline: 1px solid; 

[nayaba]

Can you push your most recent code to github? I'm not able to recreate this bug on my end.

[BeccaK8]

I increased the transition time and pushed that version to github so you can see the line for a longer time.

[BeccaK8]

Solved my issue - I was letting the js set the initial visibility of the button to hidden but that was coming too late. Once I set it in the css too, it works perfectly. Thanks!