Issues still remain rendering menu item in assignments in Chrome

[marktaylor46]

Further #800 There still seems to be issues rendering the menu items in the assignments tab in Chrome. Please see the two screenshots below from a meber site using latest Salient 1.0.2 and Gantry 5.1.3.

forum link http://www.rockettheme.com/forum/gantry5-for-joomla/247972-problem-with-assignments-and-theme-outlines?start=0#1235817

[w00fz]

This is a rendering issue in Chrome and even though I tried to work around it, it only fixed the Mac version, for whatever reason.

There's nothing we can do about it, a solution is to disable the slimming-paint in the Chrome flags, like explained on this site.

This rendering issue has caused many troubles on many sites, it is unfortunate but not a Gantry issue.

[w00fz]

More specific details about the Chrome issue itself, v44 vs v45.

https://code.google.com/p/chromium/issues/detail?id=527709
https://code.google.com/p/chromium/issues/detail?id=471764

[marktaylor46]

Thanks for the details - that gives me something to share with the members...

much appreciated :)

[topwebs]

Actually, the details about the Chrome issue related to WP problems are at
https://code.google.com/p/chromium/issues/detail?id=509179

It appears from this thread that whatever the WP problem was with the issue has been fixed in the latest stable Chrome release. However, I find that in latest stable Chrome and Canary builds, the problem still exists for G5. Using Chrome flag as described fixes the issue, so it is clear that this is the problem. I would suggest that someone from RT add something to the proper thread I cited so that the bug can be fixed. It appears to me that in the thread, they regard it as fixed now.

[w00fz]

The wordpress and more common issue of Chrome with the rendering of overlapping elements that has been spread across sites has indeed been fixed, although the one affecting the columns is a different issue that hasn't still been resolved.

When you have scrollbars or positioned elements or overflown elements in a CSS3 columns Chrome, like we use for Assignments, it does render blank.

These are the issues reported in https://code.google.com/p/chromium/issues/detail?id=527709 and https://code.google.com/p/chromium/issues/detail?id=527709 which are still open.

The good news is that 527709 has been assigned so hopefully that will get fixed soon.

[topwebs]

The Chrome flag fix no longer works in Chrome 46, but the menu item is still a problem.

When I look at the issue in Chrome inspector and for div.settings-param-wrapper uncheck the 3 overflow statements below, the assignment buttons return and work in the right column. This seems easy to fix. I don't know how to recompile the admin css.

element.style {
/* overflow: auto; /
}
#g5-container #assignments .settings-param-wrapper {
min-width: 100%;
max-height: 455px;
/ overflow-y: auto; /
/ overflow-x: hidden; */
margin: 0 -10px -10px;
}

[w00fz]

Both issues are still open, if you look at my last comment I am explaining that the issue is not related to the flag but to other issues related to overflow within columns.

Chrome, or more specifically Blink, is the only engine facing this issue as far as we can tell and unfortunately your fix is not acceptable since it forces not using any overflow.
The overflow ensure that a long list of menu items gets truncated by scrolling panels, allowing the page to be slimmer.
If you use a lot of multi language menu items or are on Wordpress, most likely you will have a lot of items and without overflow it will get really long.

We hope the bug gets fixed soon by the browser. As you can see from the tickets, this issue is getting reported a lot so hopefully we'll see this fixed soon enough.

[topwebs]

Can you tell me how to recompile admin css so I can change the css for my own use for now?

[w00fz]

Easiest way is for you to just edit the admin.css file. I know it's a big file but you can easily look for that overflow in there.

If you plan to recompile starting from the scss files, then you will need Gulp and Sass. I outlined all the details in the README.md of the project. Have a look at https://github.com/gantry/gantry5#bundling-js-and-compiling-scss

[topwebs]

OK, I edited the following line in admin.css by adding overflow:visible !important;
#g5-container #assignments .settings-param-wrapper { min-width: 100%; max-height: 455px; overflow-y:auto; overflow-x: hidden; overflow:visible !important; margin: 0 -10px -10px; }

All the toggles come back on in Chrome. I have hundreds of posts, but the page is fine, just long. I look at the same page in FF with overflow hidden and each section is equal height with scroll bars. IMHO I much prefer the long page where I can see everything at a glance, rather than all those section scroll bars. My suggestion is to turn off those overflows permanently.

[w00fz]

The long page was how we had it initially, the reason we added the overflow scroll was due to a big amount of requests on that matter.
I am like you, I'd rather have less scrollbars and a longer page than the other way around, I guess it depends on taste.

I really hope Blink engine will fix the issue soon enough.

[topwebs]

Is there anyway to override admin.css with a admin-custom.css, so every gantry update doesn't wipe out my preferred change?

[topwebs]

My other comment, since G5 is unusable in Chrome now, the most popular browser, why don't you make the change to overflow:visible so at least the menu page works? A long page is better than a blank white panel for anyone.

[w00fz]

You have valid points. I reverted the implementation for the time being. Current behavior is going to be long page with no scrollbars, until Blink fixes the issue.