Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Weird Chrome z-index issue. Please take a look.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #153390
    nixnerd
    Participant

    I’m constructing a pure CSS3 animated envelope contact form. However, it only works in Firefox.

    Here is the link:

    https://googledrive.com/host/0B4n4B8hVgqfhX19rMV9aM19fS1k/index.html

    If you open it in Chrome, the text fields do not work, even though the paper has a higher z-index value than the top flap.

    What’s the deal? How can I make this work.

    Any help from the usual cast of characters would be MUCH appreciated. Thanks!

    #153393
    Tomasz Lisiecki
    Participant

    Hi :)

    Just noticed that transitions don’t work in Chrome, hence the below:

    transition property requires prefixes so add:

    #top,
    #paper {
        -webkit-transition: all 0.5s 0.5s;
        -moz-transition: all 0.5s 0.5s;
        -o-transition: all 0.5s 0.5s;
        transition: all 0.5s 0.5s;
    }
    

    Non-prefixed property should always be last as it isn’t browser dependent, so its a fallback. Let me know if the animation works in other browsers after applying that ;)

    In regards to fields being unclickable. By default all elements have z-index of 1. If you gave a #paper z-index of 10 it has been automatically pushed over the fields so they are behind it. Hence you can’t click them :)

    #153404
    Paulie_D
    Member

    The transitions work fine in my version of Chrome and I CAN see the issue.

    It would be helpful if you could make a Codepen (rather than just linking a page) so we can play with the raw code to see if we can come up with a solution.

    Tinkering in Developer Tools just isn’t getting it done.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.