tooltip jolt issue in MacOS Safari browser

[raj2907]

When the form first loads, and for a period afterwards, there are screen jolts each time a help icon is moused over. This issue is occurred only on MacOs Safari browser.

Below is the code i have used to open tool tip

$(img).opentip(title, { showEffect: 'blindDown', tipJoint: "top left", removeElementsOnHide: true, stem: true, target: true, tipjoint: ['center', 'top'], hideTrigger: "tip", hideTriggers: ["trigger", "tip"], showOn: "creation", hideOn: "mouseout", fixed: true, background: "rgb(234, 236, 240)", borderColor: "rgb(187, 187, 187)" });

please help me on this.

Regards,
Raj.

[enyo]

Could you please post a screenshot and your MacOS + Safari version.
Thx

[raj2907]

MacOs version:10.7.5
Safarai browser version: 6.0.4

[enyo]

What do you mean by screen jolt? Might it be caused by the tooltip sticking out of the browser window?

[raj2907]

No it's positioning correctly, but Screen flickers on every tool tip item mouse over.

[enyo]

I'm really sorry but I have no notion of what could cause the behaviour you're describing (and I'm not quite sure what this behaviour concretely is).

Do you have a link where I could try it out?

[raj2907]

I have uploaded website page copy on the below link
globalpanda.versatile-soft.com/testtooltip.zip

Please to open the page in MacOs and mouse over the help icon, you will see page flickering.

[enyo]

Ok, now I see what you mean.

This is a webkit bug, and is caused by webkit switching between gpu and cpu rendering (as far as I could figure out).

If you set those properties on the container form, it will force webkit to always render on the gpu which will prevent the flickering:

#aspnetForm {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}