- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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 :)
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.