While working on a website utilizing some 2D transitions from CSS3, I noticed that when I would preview the page in
Chrome there was a strange flicker as I moved the mouse rapidly over elements with selection-initiated transitions (in this case menu button images that scaled up slightly and shifted while hovering over). From what I found, this was a webkit issue (so also pertinent to Safari) that can be resolved by setting the webkit backface's visibility attribute to hidden within the element's (in this case img) CSS style block:
-webkit-backface-visibility: hidden;
Lo and behold, the flicker stopped and the transitions ran smoothly. I also found this was good to implement on other elements with transitions, such as <div> and <span> classes, in which the user might move quickly from one to the other while using.
And what solution do you propose, when all these CSS webkit properties fail to fix the issue?
ReplyDeleteI would require more information about the issue to provide other potential solutions.
Delete