Close button gets cut off when page elements are using border-box for box-sizing.

[wjthomas9]

When declaring CSS3 box-sizing-border box on all page elements, the close button gets cut off on the first image. Specifically, it seems to cause the .fancybox-wrap container for the first image displayed to have an inline style of overflow: hidden, which cuts off the close button.

Here's the code that causes the issue for fancybox. Put this at the top of your stylesheet:

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Here's a link to a Fiddle where you can see this occur: http://jsfiddle.net/jonthomas/SxZuR/4/

[fancyapps]

You can set for fancyBox like this - http://jsfiddle.net/ut93u/

(make sure you are using the latest source code - https://github.com/fancyapps/fancyBox/zipball/master)

[wjthomas9]

Ah, that works perfectly, thank you. I was only setting box-sizing: content-box on the wrap and on a handful of divs within the wrap. Using the * selector did the trick. Thanks again!

[wjthomas9]

This doesn't seem to work anymore. See http://legacy-pointe.clearfiredev.com/area-1-detail.html and click on one of the image thumbnails.

[wjthomas9]

I'm sorry, it does work. I didn't have the most up-to-date code. Thanks again!

[kitzberger]

Had a similar issue ("caption located outside the box") when integrating fancybox v3 with bootstrap 3 that comes along with box-sizing: border-box as a default for all elements.

I got it working due to the jsfiddle you posted:

.fancybox-wrap {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

@fancyapps: wouldn't that be a harmless, good addition to the v3 css file?