4

My site: http://shuttersonthebeach.com

My browser/os: Safari 5.0.4 +/Mac

The issue: click on either 'calendar' or 'specials' in the masthead of the page. An overlay should reveal. Inside of that overlay there are columns of text w/ custom scroll bars (jScrollPane). In Safari, only on pages that have a flash header, the text inside of the custom scroll area is being distorted. This is not the case in any other browser (including Chrome).

My best educated guess was that it had something to do with the wmode parameter of the flash object. I tried changing the wmode from 'transparent' to 'opaque' but the problem persisted. I also considered the possibility of a z-index related issue... from what I can tell, this also is not the problem.

I have searched the web high and low for someone else who is experiencing something similar but I have not been successful. Any assistance you could provide would be greatly appreciated.

Thanks!

UPDATE: I determined that removing jScrollPane and adding overflow auto fixes the text distortion issue [Please see attached image]. Of course, this is not a solution because I do not want to use the default browser scrollbars but it may be useful info for debugging.

ANOTHER UPDATE: This issue is not related to flash specifically. The distorted/blurred text occurs over HTML5 video as well in Safari.

panel without jscrollpane but with browser default scrolling

morrisbret
  • 203
  • 2
  • 10
  • 1
    That's very very strange! I can reproduce on my Safari here (but not on Chrome which is also a webkit browser). It's the first I've heard of anything like this though... If you take jScrollPane out of the equation and just have the browser's default overflow:auto scrollbars in there then is the text still effected? – vitch Apr 16 '11 at 11:15
  • That's a great suggestion @vitch. Thank you. I removed jScrollPane and made the columns overflow: auto and the text distortion diapered! This suggests to me that there is something odd about jScrollPane, Flash and Safari haha. – morrisbret Apr 18 '11 at 20:15
  • Curiouser and curiouser! I guess to narrow it down further you could try to see if elements which are "position: absolute" on top of flash content also have their fonts messed up in Safari... – vitch Apr 19 '11 at 14:05
  • Elements that are just positioned absolutely over the flash object do not have distorted text. Seems to only be happening on elements that are being targeted by jScrollPane. – morrisbret Apr 19 '11 at 16:20

2 Answers2

0

I experienced the same problem with Opera some times ago, very annoying… jScrollPane uses overflow:hidden, and browsers plugins do not like that very much.

But since your problem is on Webkit, you could do it with CSS for Safari/Chrome?

bpierre
  • 10,957
  • 2
  • 26
  • 27
  • thanks for your suggestion @bpierre. didn't realize that webkit allowed for scroll bar styling with css. i'd obviously prefer to not have to do a one-off webkit scroll bar and use the jscrollpane for everything else but it may come down to that haha. thanks! – morrisbret Apr 15 '11 at 22:29
0

I came across the following article when searching for something different and I thought it might be useful:

http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

It mentions hardware acceleration and position: relative being the culprits of the disappearing anti-aliasing. You can't do anything about position: relative (since jScrollPane needs that internally) but maybe changing the WMODE of the flash could help?

vitch
  • 3,215
  • 3
  • 25
  • 26