Styles not applying to some elements, Gallery Disappears in TinyMCE, WP 3.5

Question

I'm noticing a strange bug in Chromium/Chrome, when after some edits one or more gallery placeholders (the camera and picture in WP3.5) disappear. In one case, I have one placeholder that displays, and the one above doesn't, inspector shows that one doesn't have the img.wpGallery style applied to it, though they both should be working.

Working:

<img class="wpGallery mceItem" title="gallery ids=&quot;77,76&quot;" alt="" src="http://localhost/wordpress/wp-includes/js/tinymce/plugins/wpgallery/img/t.gif" data-mce-src="http://localhost/wordpress/wp-includes/js/tinymce/plugins/wpgallery/img/t.gif">

Another, not working:

<img class="wpGallery mceItem" title="gallery ids=&quot;32,22&quot;" alt="" src="http://localhost/wordpress/wp-includes/js/tinymce/plugins/wpgallery/img/t.gif" data-mce-src="http://localhost/wordpress/wp-includes/js/tinymce/plugins/wpgallery/img/t.gif">

These were right next to each other, yet inspector verifies that the img.wpGallery rule does not apply to one of them, therefore it disappears.

This odd bug seems to be caused by an odd state of the editor - saving or reloading shows it correctly again, until you start clicking around and editing. It almost seems like a graphics/webkit bug. It seems to be random when it happens, but adding multiple galleries, typing directly after, before, clicking out of the editor, in the editor, repeating a few times, usually can make one or more galleries disappear...

Is this a known bug in Wordpress, TinyMCE, or Webkit? Has anyone found a solution?

I'm seeing this on two WP installs, on two different systems, and even on the default theme.

Answer 1

Seems to be related to a chrome bug. It will be fixed in Wordpress 3.6. (see: http://core.trac.wordpress.org/ticket/24177 )

It is suggested to rename the css-classes from wpGallery to wp-gallery.

Answer 2

Surprised to see someone with the same obscure problem as me.

What I did to work around this was move my CSS to the image's style attribute. Of course I had complete control over the elements being rendered... not sure if it'll help in your case.

Answer 3

Looks like a simple workaround is to go through the tinymce.activeEditor.contentDocument.getElementsByTagName('img') elements and set element.className = element.className. (This can be added in many handlers like onClick, onChange, etc. to prevent the weird state when the class doesn't apply itself.)

This seems to be a good workaround, but I would like to know how/why TinyMCE with Webkit gets in this odd state though.