Box-sizing border-box issue

  • Resolved dana_cz

    (@dana_cz)


    11 years, 2 months ago

    Hi,
    when using the box-sizing as border-box in Firefox, the enlarged image kind of ‘skips’ into center of the screen. I’m using this CSS (Zurb Foundation 3 framework):

    *, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

    and when I disable these, Fancybox works normally without any skipping. Since I can’t really remove the border-box without breaking my whole layout, is there a workaround I can use?

    https://www.ads-software.com/plugins/easy-fancybox/

Viewing 12 replies - 1 through 12 (of 12 total)

  • Hi,

    I’m having the same problem in Firefox with Easy FancyBox (latest version) and the Twenty Thirteen theme. Everything displays fine in Chrome and IE. In addition, the close and right arrow buttons are misplaced. I too cannot disable these styles in the theme without breaking the layout. Can anyone offer a workaround?

    Thanks so much!

    Hi guys, this is a tricky one… Could you test the following code in a sidebar text widget?

    <style type="text/css">
#fancybox-loading, #fancybox-loading div, #fancybox-overlay, #fancybox-wrap, #fancybox-wrap div { box-sizing:border-box }
</style>

    Please let me know if this changes anything (for better of worse)…

    I tried it, but I don’t see any change.

    @zhanna, can you share a link? I’ll have a look tomorrow…

    Try this: https://jennifergalas.com/2013/06/30/summer-colors-and-cactus-flowers/

    I left the code in the sidebar widget, but I can remove it if you want.

    Thanks so much!

    Well, to me it looks horrible and there is a strange ‘bounce’ happening on opening an image. At least in Opera, Firefox and Chrome… If these box-sizing style rules are removed again (and FancyBox works in content-box mode again) it looks alright to me. Could you remove it again?

    What exactly are you seeing in Firefox? I see no differences in these browsers.

    (I’ll be back tomorrow)

    Yes, you’re right, now I am seeing the same thing in all three browsers. The other day, it seemed to only be happening in Firefox; I may have been mistaken.

    With or without the border-box styling, I’m seeing just what you describe: the “bounce” upon opening an image (almost as if it is recalculating the position), and the misaligned close and arrow buttons.

    I have now removed the code you posted above; to me it looks the same either way.

    https://jennifergalas.com/2013/06/30/summer-colors-and-cactus-flowers/

    Thank you!

    Thread Starter dana_cz

    (@dana_cz)

    The code you posted doesn’t work for me, the ‘bounce’ is still there, unfortunately. My close and arrow buttons are not misaligned.

    Here’s the link: https://ynami.cz/produkt/cesticky/

    OK, I think I found out why… Apparently Firefox (still!) does not recognize box-sizing, only -moz-box-sizing ??

    Please try this in a text widget:

    <style type=”text/css”>
    #fancybox-loading, #fancybox-loading div, #fancybox-overlay, #fancybox-wrap, #fancybox-wrap div { -moz-box-sizing: content-box }
    </style>

    Thread Starter dana_cz

    (@dana_cz)

    Awesome, that works, thank you! ??

    Works great for me, too. Thank you for all of your help!

    Thank you for reporting ?? the stylesheet will be adapted to accomodate Firefox in the next version.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Box-sizing border-box issue’ is closed to new replies.