I custom styled the buttons of a Colorbox lightbox on this page (click the image to load).

There are gray buttons (two arrows and an X) that do not appear in Safari (7.0.1) but appear in Chrome and Firefox.

Using web inspector to change the background to a color has no effect either.

CSS of one button:

#cboxNext {
position: fixed;
top: 47%;
right: 18px;
width: 22px;
height: 32px;
background: url("buttons.png");
background-position: -42px 0;
background-repeat: no-repeat;
background-color:white;
}
  • The .png sprite file and stylesheet are in the same directory.
  • Updating to the latest Colorbox version didn't help (I reverted back to older version).
  • I read here that Safari in the past had issue with the background shortcut syntax, hence the long form.

Any help is much appreciated!

有帮助吗?

解决方案

Fixed.

The position:fixed buttons were child elements of a container that had overflow:hidden. Unlike other browsers, Safari seemed to hide the buttons inside their parent.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top