WP4.5 jQuery update and table styles issue

  • This issue is so weird that I don’t really know how to describe it… ??

    —

    Issue description

    I am using Beaver Builder plugin where I’ve noticed this issue. But please, don’t stop reading right now thinking I should post a Beaver Builder plugin support ticket, it’s more complicated…

    I also use a custom built theme.

    When I want to add or edit a page builder’s row/column background image, the media library won’t display.

    This was working perfectly fine in WordPress 4.4.2, though. I’ve been able to trace the issue down to CSS issue, not (directly) a Javascript one!

    —

    What’s needed to replicate the issue

    1. jQuery v1.12.0+ – This is included in new WordPress 4.5 by default (there is a version 1.12.3, actually)
    2. Add these styles (a simple basic table styles that can be applied in any theme as a table style reset) to the end of style.css file of Twenty Sixteen theme (any theme can actually have had such styles applied): 
      table {
  border-style: solid;
  border-collapse: collapse;
}
    3. Install and activate Beaver Builder plugin (though I guess this could affect other plugins too) and edit a “Sample Page” (or any page) with page builder and try to add a row/column background image (photo)

    Result:
    If you follow the above steps (with cleared browser cache after you apply additional table styles), media library does not open.

    —

    Fix (workaround)

    The issue is resolved once you remove the border-collapse: collapse; style or change it to separate/initial/inherit value. Or if you remove the border-style style (note that this works in any form). The media library will appear then.

    Other way to fix this is to apply the border-collapse more specifically. If your theme is based on Underscores, this should do the trick:

    table {
  /* Your table default styles (reset) */
  ...
  border: 1px solid #ccc; /* You are defining a border style here */
  ...
}

.site table {
  border-collapse: collapse; /* Now the issue is not triggered */
}

    —

    Conclusion

    As you can see, this issue is not really related to any specific theme, nor Beaver Builder plugin (or any other plugin with similar issue) and possibly not even to WordPress itself. Maybe it is just jQuery issue as if I downgrade the version to 1.11.3, everything works fine again.

    I would just like to ask anybody for opinion. Should the WordPress JS code be updated or is this a jQuery bug I should report?

    Thanks and regards,

    Oliver

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

  • I have confirmed this issue in both Beaver Builder and the Front-End Editor feature plugin.

    It looks like it affects any plugin or theme that has the CSS Oliver mentioned above and uses the media uploader on the front-end.

    So far, trying to target the media uploader and patch this with CSS overrides hasn’t worked. Any ideas?

    EDIT: It actually looks like it also affects the media uploader in the admin if that CSS is present.

    Justin

    I am having the same issue. I used the following code:

    table {
    border-collapse: initial;
}

.site table {
   border-collapse: collapse;
}

    I am also noticing that if I select an image in a text editor, then close the text editor, the image quick edit bar (with alignment, edit, remove buttons) stays visible. Not sure if it’s related, but there is some weirdness happening here!

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Weird. Do you get any errors in the JS console?

    Nope, no errors in the console.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Ok, so, if there are no console errors, then the version of jQuery doesn’t matter, right? Just trying to narrow it down.

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    That’s what was really weird and I couldn’t understand. It simply didn’t work and no JS errors or warnings were thrown.

    It really seems like CSS is preventing JS………….. I know how this sounds ??

    jQuery version kind of matters as, like I’ve mentioned in my post, downgrading the jQuery to 1.11.3 (which is the first pre 1.12.0 version and this was used in WP4.4) does resolve the issue.

    Another info I’ve just found out:
    I tested this across multiple browsers (on Windows). Here are results:

    Browser behavior:

    • FireFox – working fine!
    • IE11 – not working
    • Chrome – not working
    • Opera – not working
    • Edge – not working

    So it seems webkit browsers have some issues here. And also IE ??

    Please, someone test this on Mac.

    I have reproduced this issue on a Mac using Chrome.

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    OK, thanks to Justin’s help the issue seems to be resolved! Many thanks, Justin!

    I have also logged an issue for jQuery project just in case.

    Thank you! The workaround worked for me too.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘WP4.5 jQuery update and table styles issue’ is closed to new replies.