Visual Index Overlay not working in Chrome?

max1ks / 2012-09-30 17:34:06   

The overlay function doesn't seem to be working in Chrome, at least not from a visual index exhibit. This is the latest version of chrome, and on two different Macbooks.
When the image is clicked the screen just goes dark. Works fine in Safari, and it certainly used to work fine in Chrome. Any ideas?

My site: onethousandshirts.com and the specific page not working onethousandshirts.com/tshirts/heart-of-the-sunrise/

arsondpi / 2012-10-01 07:56:02   

not sure if these errors might brake the page for Chrome but its worth checking out: validator.w3.org/…

max1ks / 2012-10-01 09:21:31   

Thanks for that arsondpi, I should validate more often, and I'll tidy some of that up, but I don't think that's causing the problem. In older versions of Chrome (21), the overlay works fine, so I'm guessing it's something to do with the recent Chrome update, I just have no idea what it would be that's causing the issue.
I'll sort out those errors shortly and report back, but wonder if any other people have similar issues with overlay and Chrome.

mindau / 2012-10-01 09:23:24   

I have the same problem. It was working just fine previously. I checked for errors and get 40 errors like this:
Line 85, Column 105: Bad value group1 for attribute rel on element a: Keyword group1 is not registered.
…47' class='group overlay' rel='group1'>..
Does anyone know how to fix this?

Vaska A / 2012-10-01 09:30:24   

But a validation error wouldn't kill the entire page from working.

mindau / 2012-10-01 09:42:11   

It doesn't kill the entire page. Just when thumbnail is pressed and image loads it stays under the overlay and no control is available. After you press Esc for a millisecond it looks how it should be. This problem happens just in Chrome. And it worked fine before so I have no idea what has changed automatically. Website: imagine-3d.com

Vaska A / 2012-10-01 09:45:40   

But the above validation error is not a big deal - is what I'm saying.

I don't have Chrome but I'll install it when I'm back - I have to run out the door for some lunch things.

;)

max1ks / 2012-10-01 09:59:55   

Thanks Vaska - yeah, that's what I thought, validation not likely to be the problem here. Thanks for taking a look and hopefully we can find out the issue.

mikestacey / 2012-10-02 05:29:19   

Yeah same problem here - it looks like a z-index thing. The overlay is over the top of everything else.
mikestacey.com

jonathangrevsen / 2012-10-02 07:19:17   

This could also be the thing affecting the overlay on iOS

mindau / 2012-10-02 14:41:11   

Well for now I just got rid of overlay so pictures at least are shown. But would be great if someone could fix this bug. It's nice to have a separation layer behind the picture. If someone else is looking for this temporary workaround just lower the opacity to 0.0 in overlay.css file (ndxzsite>css).
.light-overlay { background-color: #fff; opacity: 0.0; }

Vaska, did you have a look at this yesterday? Any ideas what might be a problem?

jonathangrevsen / 2012-10-02 15:07:55   

Just testet your site on an Iphone 4s and here the overlay now works with your quick fix.

jonathangrevsen / 2012-10-02 15:22:13   

well. in the sense, that images open up in big format...

mikestacey / 2012-10-02 20:41:30   

thanks mindau, at least the images show. The titles that normally show top left are still hidden though.

rlopezortiz / 2012-10-03 00:35:42   

The changes don't work for me :x

1ks / 2012-10-03 07:55:41   

I think this fix only applies to iPhone, it doesn't seem to make a different to the Chrome issue. Some kind of z-index problem still seems like a possibility to me, but I don't know quite what, and why it just affects the recent Chrome update.

jonathangrevsen / 2012-10-03 08:54:48   

I remember in the 2.0 version of Indexhibit I was playing with opacity of the index, and when doing this, the name and exhibit titles would put them self behind the menu color. This only happens in Chrome. Maybe this is similar to this issue.

jonathangrevsen / 2012-10-04 16:23:48   

Hi Vaska.. Are you on to this?

Vaska A / 2012-10-04 22:02:29   

On my setup I've resolved this - it's a pretty simple fix (I'll add it to the base files for the next release).

You can fix this at /ndxzsite/css/overlay.css

Around line 25 replace the #dialog rule with this one (we're simply adding a missing z-index):

  1. #dialog { position: fixed; top: 0; left: 0; text-align: left; width: 100%; padding: 0; margin: 0; z-index: 4; }

And that should do it. Let me know how it goes...

jonathangrevsen / 2012-10-05 00:16:06   

Works perfect. Both on iOS and Chrome. Thank you very much.

bipster / 2012-10-05 06:17:09   

Great! This bug was driving me nuts!

Vaska A / 2012-10-05 06:50:03   

I'm super relieved it works on iOS too - I had not tested that.

max1ks / 2012-10-05 07:18:14   

Brilliants, works great, thanks for finding out the problem.

mindau / 2012-10-05 09:54:05   

Works! Thank you Vaska!

Vaska A / 2012-10-05 13:07:47   

Since this is resolved, I'm going to close this thread. Thanks to everybody for the information they provided and confirming that things are working. ;)

This thread has been closed, thank you.