MAC Safari background problem
Solving cross browser and cross platform issues
Bug problem reported: The nav bar is transparent and each time the cursor moves there, the options disappear because of the white background.
The first question: Where? What browser? Win? Mac? Linux?
Answer: Safari on Mac.
How this Mac Safari background problem reveals
All browsers on Windows and Mac, except Mac/Safari, show all CSS backgrounds properly. On Mac Safari some background images are invisible. Backgrounds and hovers of tabs and titles are gone, however some background images show up properly on the page.
Everything is all right with a copy on local machine. Bug reveals watching the page over the web only.
Googling for Mac Safari background problem:
- mac safari background image not visible
- mac safari background image properties
- mac safari background image css
- safari background display bug
- safari background display problem
- safari background display issue
Paths are correct. File type - gif, png-8, png-24, png-32, jpg - does not play a role here. Size of background image does not matter.
Solving the problem
- Some of class names are similar to image names in CSS. Like .tab-hover and tab-hover.png
- Some pairs of class and image names belonging to the same functional group aren't similar at all but fail to perform as well.
- Renaming all images to be distinct from class names, like tab-hover.png to tabcommon-hover.png and so forth.
- Mac Safari starts behave properly, now it shows all backgrounds and hovers as other browsers do.
Conclusion/solution
In case of mysteries with CSS background on Mac Safari, check over the class and image names.
2011
Web Development - XHTML CSS JavaScript jQuery.