WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Tiled Gallery doesn't tile correctly in IE (15 posts)

  1. david.ei
    Member
    Posted 1 year ago #

    The mosaic tiled gallery works fine in every browser I've tested except IE. When opening my tiled gallery http://americansailinginstitute.org/fleet-gallery-2/ in IE 10 (desktop), some images randomly display as tiny thumbnails. This only occurs when IE's zoom factor is set above 100%. F5 or refresh usually fixes the problem until you navigate away then return to the page. Chrome and Firefox never exhibit the problem.
    I'm using the Responsive theme.
    I've updated to Jetpack version 2.3.
    I've added to Appearance > css:
    .et_lb_module img, .tiled-gallery img {
    max-width: 1000px!important;
    }
    The problem occurs when all plugins except Jetpack are disabled.
    I don't see any Javascript errors (IE status bar = ON, and Internet Options > Advanced > Display notification about every script error = ON).
    I've spent a lot of time searching the forums and am out of ideas. Any help would be greatly appreciated.

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I don't seem to be able to reproduce the issue on my end; the gallery is always displayed properly, whether I zoom in or not:

    1. no zoom - http://i.imgur.com/Hr4h9GA.png
    2. 200% zoom - http://i.imgur.com/xVJ3jMy.png
    3. 400% zoom - http://i.imgur.com/i0SjOPI.png

    Have you managed to solve the issue by yourself?

  3. david.ei
    Member
    Posted 1 year ago #

    I am still having the problem. Here is a link to some screenshots.

    http://americansailinginstitute.org/tiled-gallery-ie-10/

    Note that zooming in or out while on the page works fine. You must navigate to the page with IE's zoom > 100% (I'm usually viewing IE at about 115% - see the lower right corner of my screenshots).

    The images that show up as thumbnails appears to be random. Sometimes only 1 or 2, sometimes most of them. You have to scroll the whole page to see if it rendered correctly. Thanks!

  4. david.ei
    Member
    Posted 1 year ago #

    I restored advanced setting and reset IE settings (Tools > Internet Options > Advanced) and rebooted. The problem did not go away.

    I tested from another Win 7-x64 PC with IE 10, the exists there, too. Both PC are running 64 bit Win 7.

    I tested from Win 7-x86 Virtual Machine PC with IE 8, it did NOT have the problem. I'm upgrading it to IE 10 and will test again.

  5. david.ei
    Member
    Posted 1 year ago #

    I tested on a Win 7-x64 Virtual Machine PC with IE 8, it did NOT have the problem. I upgraded it to IE 10 and the problem recurred.

    I tested on a Win 7-x86 Virtual Machine PC with IE 8, it did NOT have the problem. I upgraded it to IE 10 and the problem recurred.

    Jeremy,
    The above seems to point to IE 10 as the culprit. I wonder why you don't see the problem. Are you sure you set the zoom BEFORE you navigated to http://americansailinginstitute.org/fleet-gallery-2/? And scrolled to view the entire gallery?

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I followed your instructions, and set the zoom to 115% before to load your gallery page. I then loaded it, but couldn't reproduce the issue:
    http://d.pr/i/aO45

    Do you have other add-ons, or options that may affect the way the images are displayed?

  7. david.ei
    Member
    Posted 1 year ago #

    I had some add-ons, but they were removed when I reset IE. Which version of Windows are you using? x-86 or x-64?

    After zooming to 115%, try going back and forth between "Home Port" on the menu bar, and "Media Gallery" > "Our Fleet" > "Fleet Gallery" a couple of times.

    FWIW, several people on several PC's see the problem, so it's not specific to my PC. I really like the tiled gallery, I'd hate to have to remove it and use something else. Thanks for you time.

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Thanks for the detailed steps! I was finally able to reproduce the problem when going back and forth between the home page and the gallery page. There is something fishy going on here (no pun intended!).

    Could you try to switch to a different theme for a few minutes, and let me know if you can still reproduce the issue?

  9. david.ei
    Member
    Posted 1 year ago #

    Great!

    I switched to the Twenty Twelve theme. It looked pretty broken, (the menus were messed up) but the problem still existed. If anything, it was worse.

    I can give you WP admin access if that will help (don't worry about breaking anything, I backed up the site before switching themes and the site isn't officially "live" yet anyway). I need a reasonably safe way to send you login credentials, though.

  10. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you contact me through this contact form, and mention this thread?

    Thanks!

  11. david.ei
    Member
    Posted 12 months ago #

    Ok, per your email request, WordPress, all plug-ins, and the parent theme have been updated and the problem still exists.

    I turned off all plug-ins except Jetpack and cleared all IE caches, and the problem still exists.

    I've turned the plug-ins back on, but you can turn them off if you want. Just don't leave them off longer than necessary. Our board of directors will be occasionally visiting the site (they know it's under development, but still...).

    How many millions of man-hours have been wasted trying to get IE to display websites correctly?

  12. david.ei
    Member
    Posted 12 months ago #

    BTW, I'm not the only one having this problem. A Google search turned up numerous people seeing it or something similar. It's just that the recommended CSS workaround (".et_lb_module img, .tiled-gallery img { max-width: 1000px!important; }" - which I am using) doesn't work in IE 10. My testing indicates that it DOES work for IE 8.

    Here are several:
    http://wordpress.org/support/topic/jetpack-211-tiled-galleries-problems-with-ie-80?replies=10

    http://wordpress.org/support/topic/carousel-and-ie8-not-working-for-me?replies=9

    http://wordpress.org/support/topic/tiled-mosaic-galleries-break-in-ie-at-zooms-over-100?replies=2

    http://www.dewpointproductions.com/seo_blog/wordpress/wordpress-ie8-fix-for-display-problems/

  13. david.ei
    Member
    Posted 12 months ago #

    Following up on the fact that the page seems to work in IE8, I tried adding:
    <meta http-equiv="x-ua-compatible" content="IE=8">

    to header.php immediately after the <head> tag. This fixes the problem!, but other pages don't render as well. Is there a way to inject this <meta...> tag just on tiled gallery pages?

    I've removed the <meta...> tag so you can still see the problem.

  14. david.ei
    Member
    Posted 11 months ago #

    This problem was finally fixed by 2 things:
    To my custom CSS I added:

    .et_lb_module img, .tiled-gallery img {
    /* max-width: 900px; */
    max-width: 1000px!important;
    }

    This made the tiled gallery display correctly in IE 6, 7, and 8.
    To my functions.php I added:

    function jeherve_check_galleries( $post ) {
    global $post;
    if ( false !== strpos( $post->post_content, '[gallery' ) )
    echo '<meta http-equiv="X-UA-Compatible" content="IE=8" />';
    }
    add_action( 'wp_head', 'jeherve_check_galleries', 0);

    This made the tiled gallery display correctly in IE 9 and 10.
    Thanks Jeremy for all your help!

  15. Madicken
    Member
    Posted 4 months ago #

    I just wanted to thank you for the above! I have also struggled with this a lot. Very frustrating! I just wanted to share the solution that worked for me.

    Theme Free Responsive from Cyberchimps.

    Even though I solved the big issue with the above I still had problems when I opened IE in 125%. So i started playing around with

    .et_lb_module img, .tiled-gallery img {
    /* max-width: 900px; */
    max-width: 1000px!important;
    }

    and got it working with my theme and IE11 with the following:

    .et_lb_module img, .tiled-gallery img
    {
    max-width: 100%!important;
    max-height: auto;
    }

    Thanks again Jeremy and david.i!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic