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

Home Forums CSS Webkit transform problem (SAFARI)

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #33189

    Hello guys!

    I’ve been searching google the whole day for finding a solution for my problem and I found 1 article at apple support, but they did not get it solved, so I am asking here cause I know some great developers are here!

    My problem is as followed:
    I have a list of div:s, the first div has an id #post, this #post should, only in safari, make a 180 degree transform and change the content of the div. That means it is like a card with a front and a back side.

    It works on chrome, except the background, which gets kinda laggy while flipping, but that’s not a concern since chrome will not be supported for the flip.

    The problem I have is, that after the flip, safari gives opaque 0 (not in real css) to the content of it. I can highlight the text with my mouse, unable to see it, but with CTRL + c I can copy and +v paste it. So it is existing at correct position, but not showing… I hope you understand my problem.

    My code is as followed:

    #scroller is the basic container of all div:s I talked about at the beginning.


    #scroller {
    -webkit-perspective: 2000;
    .block {
    z-index: 99;
    position: position;
    -webkit-transform-style: preserve-3d;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    z-index: 900;
    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    z-index: 800;
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    .back p {
    background-color: white;
    color: black;
    opacity: .5;

    PHP Code

  • And the javascript toggle function:

    $("#post .post_more a").click(function() {
    if(document.getElementById("post").className == "block"){
    document.getElementById("post").className += " rotated";
    document.getElementById("post").className = "block";

    Does anyone know what Im doing wrong?

    Thanks in advantage.

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