Forums

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

Home Forums CSS CSS3 transform and transition issue, Safari 5.1

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #33812
    droid
    Member

    Hey guys I’m working on a one page website with different sections, and a static navigation bar on top. On the bottom of the page there is a contact section with a contact form.
    On the textfields in the contact form I use css3 transform and transitions to scale the fields to get slightly bigger and change color on hover and active state. These effects on the textfields make the links in the nav bar flicker. It seems -webkit-transform: translateZ(0px); does prevent this. The flipside is the links in the navigation gets thinner and bad rendering. I did some testing, Firefox and Chrome is fine. This only happens in Safari 5.1 in OS X Lion, is there a solution to this issue or is this a bug in Safari?

    #84558
    chrisburton
    Participant

    Seems like Lion is having a few troubles since released.

    #84627
    droid
    Member

    So this is a Safari 5.1 and OS X Lion issue? I have tested the latest Webkit build and it’s all the same.

    #84638
    chrisburton
    Participant

    You said it was a Lion issue, I’m not on a Mac so I can’t test. Lion has been having issues since released and this may or may not be related to that.

    #86048
    lynseydesign
    Member

    I’m having the same issue with Safari on mac and pc. Version 5.1. It is driving me crazy!

    #86053
    chrisburton
    Participant

    @ChrisCoyier made a video on Youtube of -webkit-backface-visibility. Watch the flicker at the top and then watch after he inputs code. http://youtu.be/EMmar6SqO14

    Not sure if this is a solution, but try it.

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