problem when using type=password , chrome, bootstrap

[aliogul]

hi – on chrome osx

I’m using bootstrap and I have 2 buttons NEXT TO EACH OTHER on header; login and sign up.
they look fine, each of them display different divs when mouse hover.

I’m using this code to hide/show divs – just because transition animation wouldn’t work when I use display:none, block;

    opacity: 0;
    height: 0;
    overflow: hidden;

Each div has

<

form> inside.
Everything is fine except whenever I use an input type=password in a form tag, anywhere in the page, I get problem.

One button is under another one when I have that input in the page.

For now I use type=passwordInput and -webkit-text-security: disc; instead, but still I’m trying to figure out why I have this problem.

Even if I remove all of forms and input inside those hidden divs, I still would get problem when I use an input (type=password) somewhere else in the page.

and it is totally working on safari and firefox.

Anyone faced this problem before?

—– my opinion —-

I think there is something wrong with divs as I don’t hide them by using display:none;

but still why using another password input anywhere in the page would cause this problem?

[aliogul]

here is another thing ;

I copy the div class -from css file- delete everything but keep position:absolute;

and add the style inside header like this>

<style type="text/css">
.hiddenDiv {
        position: absolute;

}
</style>

and it works????? what kind of weird situation is this? I have the same thing in style.css .

It seems I m just gonna have that style inside header till I find a solution.

[Paulie_D]

just because transition animation wouldn’t work when I use display:none, block;

You can’t transition display:block/none…as there are no intermediate steps between display:none and display:block.

I reduced case Codepen would be of more help.

[Author]

Posts