Layout of masonry wrong with Safari

Permalink Browser Info Environment
Hi
I found there is a problem with the isotope/masonry plugin in general. In Safari the layout won't be rendered correctly on page load. Once you resize the window until the container has to be redrawn, the items are ordered correctly.

I have attached a screenshot which shows the problem on your preview site.

I had to set a timeout of about 1s before the "layout" function is triggered:

$win.on('load',function(){
         window.setTimeout(function(){
               $isotope = $container.isotope({ masonry: masonryOptions,
                             itemSelector: '.masonry-item'
                             }
                           );
              $isotope.isotope('on', 'layoutComplete', function (items) {
                  loadVisible($imgs, 'lazylazy');
              });
              $win.on('scroll', function () {
                  loadVisible($imgs, 'lazylazy');
              });
              $imgs.lazyload({
                  effect: "fadeIn",
                  failure_limit: Math.max($imgs.length - 1, 0),


That way it works but of course this is kind a hack and maybe you find a better way to fix it.

Chris

1 Attachment

Type: Ticket
Status: Archived
chartan
View Replies:
chartan replied on at Permalink Reply
chartan
Well, this didn't fix the problem for Mobile Safari, but this one does:

1. in masonry.php add the following when setting the layout:

$container.imagesLoaded(function(){
    $isotope.isotope('layout');
});


and the main problem sits in the view.css file on the following line:

.easy-gallery-masonry {
    transition:.3s;
}


I removed this line and it seems to work now. Can you test this and add it to the package?

Chris
sebastienj replied on at Permalink Reply
sebastienj
Thanks a lot !
Did you have a url where i will see the gallery with the fix ?
chartan replied on at Permalink Reply
chartan
I just sent you the link by a private message, as the project isn't yet ready for the public.

Chris
sebastienj replied on at Permalink Reply
sebastienj
Hi,

YOu're right the main issue come from :

.easy-gallery-masonry {
    transition:.3s;
}


But without this, when we use filtering, the container height change is abrupt. I will need to investigate.
ConcreteCMS replied on at Permalink Reply
ConcreteCMS
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.3.1
Version Installed - 5.7.3.1
Database Version - 20150109000000

# concrete5 Packages
Block Designer (1.0.2), Easy Image Gallery (1.1.9), Fleggs Slider (1.0), Gallery (1.8.1), Nuernberger (1.0), Thumb Gallery (1.0.2).

# concrete5 Overrides
blocks/easy_image_gallery, blocks/expandable_accord, blocks/page_list, blocks/teamcols, languages/da_DK, languages/de_DE, languages/el_GR, languages/fi_FI, languages/fr_FR, languages/it_IT, languages/ja_JP, languages/nl_NL, languages/ru_RU, languages/site, languages/sl_SI, languages/sv_SE, languages/tr_TR

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.6.10

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, ldap, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, readline, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, wddx, XCache, XCache Cacher, XCache Coverager, XCache Optimizer, xdebug, xml, xmlreader, xmlwriter, xsl, yaz, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 128M
post_max_size - 32M
sql.safe_mode - Off
upload_max_filesize - 32M
ldap.max_links - Unlimited
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
xcache.var_maxttl - 0
xdebug.max_nesting_level - 100
xdebug.var_display_max_children - 128
xdebug.var_display_max_data - 512
xdebug.var_display_max_depth - 3

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/600.7.12 (KHTML, like Gecko) Version/8.0.7 Safari/600.7.12

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.