collage landscape always shows caption in Chrome (should float), OK Edge/IE11/FIrefox

denisegoldberg

Something happened - I think yesterday - to change the behavior of collage landscape galleries in Chrome.

I have my site set to show the captions in galleries set to collage landscape only when the viewer hovers over the image. (Odd though, I can't seem to find where I selected that options, if you can tell me where that would be awesome!).

Yesterday my collage landscape galleries looked fine in the three browsers I regularly use - Chrome, Firefox, and IE11.

Today my collage landscape galleries in Chrome always show the caption and the buy button. I like the addition of the buy button but I don't want the captions or the buy button to show by default in collage landscape style - the photos are too small to have a piece covered by the caption. I do want both caption and buy button to show on hover though.

Before you ask, yes, I cleared the browser cache and restarted Chrome, just in case...

Screen shot from Chrome:

Screen shot from IE11:

In case you need a gallery example, here's a link to the gallery I used for the screen shots - http://www.denisegoldberg.com/Travel/Arizona-2013/Saguaro-and.

Please fix this - I only want the captions to show on hover.

--- Denise

beardedgit

FWIW, I moaned earlier about that cart icon upsetting my text-formatting - see http://dgrin.com/showthread.php?t=243920

I've got Shopping turned off, but I still get the icon, for me it has the "Owner Buy" properties, and the hover action in Chrome is not changed (it's set to "show on hover"). Furthermore, I see your site fine - text & cart only on hover.

Nice of SM to tell us what's going to happen, eh?

denisegoldberg

beardedgit wrote: »

FWIW, I moaned earlier about that cart icon upsetting my text-formatting - see http://dgrin.com/showthread.php?t=243920

I've got Shopping turned off, but I still get the icon, for me it has the "Owner Buy" properties.

Nice of SM to tell us what's going to happen, eh?

Yes, but this isn't a complaint about the cart icon - it's about the caption + cart automatically showing in Chrome. The behavior is as expected in the other browsers.

I actually like the addition of the cart icon on hover.

--- Denise

beardedgit

denisegoldberg wrote: »

Yes, but this isn't a complaint about the cart icon - it's about the caption + cart automatically showing in Chrome. The behavior is as expected in the other browsers.

I actually like the addition of the cart icon on hover.

--- Denise

Sorry, I posted before I'd finished typing, I wanted it to say that from here I see your site fine in Chrome, no carts or text unless hovering. Previous post edited to say such.

zacHer0

Owner Buy only shows up to you while logged in. Owner Buy will always be there, even if you have the shopping cart turned off in the gallery settings.

denisegoldberg

zacHer0 wrote: »

Owner Buy only shows up to you while logged in. Owner Buy will always be there, even if you have the shopping cart turned off in the gallery settings.

This thread isn't about the owner buy showing up - it's about the captions showing all of the time in collage landscape galleries in Chrome.
I expect to see owner buy if I'm logged in!

But - interestingly enough I just tried on my work computer:
> work computer, Windows 7, Chrome 31.0.1650.63 m looks OK
> home computer, Windows 8.1, Chrome 31.0.1650.63 m always shows the caption

Any ideas about the cause of this behavior?

--- Denise

zacHer0

Sorry Denise, I meant to post that in Bearded's thread, not yours.

denisegoldberg

zacHer0 wrote: »

Sorry Denise, I meant to post that in Bearded's thread, not yours.

No problem Zac!

I find it odd and somewhat interesting that the behavior I'm seeing seems to only occur on one computer so far...

--- Denise

zacHer0

Just tried your gallery logged out in Chrome/FF/Safari and the captions only show up when hovering over the image.

Have you tried clearing cache/cookies in that Chrome browser?

denisegoldberg

zacHer0 wrote: »

Just tried your gallery logged out in Chrome/FF/Safari and the captions only show up when hovering over the image.

Have you tried clearing cache/cookies in that Chrome browser?

Yes, and I just tried it again. Cleared cache and cookies, closed browser, reopened.

I can reproduce the problem with the latest version of Chrome on Windows 8.1.
I can't reproduce the problem with the latest version of Chrome on Windows 7.

Unfortunately my second Windows 8.1 computer is a Surface and there isn't a version of the Chrome browser that runs in that environment.

Do you have a windows 8.1 system where you can check?

--- Denise

denisegoldberg

bump for status from smug.

This problem only occurs on Chrome on Windows 8.1.
Please fix it - collage galleries look terrible with the caption showing.

--- Denise

denisegoldberg

bump for status from smug.

Windows 8.1 is on a lot of computers - this needs fixing.

--- Denise

denisegoldberg

bump for status please

denisegoldberg

Any chance of getting this fixed???

--- Denise

denisegoldberg

I really don't want a band of white on top of my photos in collage landscape style. I know, I know, it's only broken in Chrome - but it looks terrible.

Can we get this fixed?

--- Denise

denisegoldberg

Bump for status from SmugMug
I know, I know, the problem only occurs on Chrome, and only on Windows 8.1 (maybe Windows 8 too, I can't check...).
Can we please get this fixed?

--- Denise

denisegoldberg

BUMP FOR STATUS

I'm having a really hard time believing that I'm the only person who sees this problem. Yes, I know, it only happens in Chrome in Windows 8 - but given that is the operating system that is on new (Windows) computers these days, why is it that you (smug) don't seem to care about it?

I looked at a site in the "Show us your new smugmug..." thread yesterday and was shocked to see captions on the images on the home page. Then I realized it was because of this defect.

Can we please get this fixed?

--- Denise

denisegoldberg

BUMP FOR STATUS

I guess no one cares that our sites look bad in Chrome in Windows 8.1????

--- Denise

denisegoldberg

at least now I know it's not just me, reported by jkinglet as well in the thread Win8.1, Chrome and Collage Landscape Captions.

Again, I only see this behavior in Chrome on Windows 8.1.

This defect degrades the look of galleries - a transparent bar showing across all photos is not desired.

I'd appreciate a status and more importantly a fix.

--- Denise

leftquark

Hi Denise,
My apologies for ignoring the DGrin forums for the last few days. I saw jkinglet's post and will try to get the Support Heroes to pull up a windows 8.1 version of Chrome to see if we can re-create the issue. I don't have a Virtual Machine on this machine and can't load it up myself . Since it appears to only effect Chrome on Windows 8.1, I'd imagine it's something to do with Chrome and not with SmugMug but I don't want to place all the blame there before I can actively look into it on our own. Even if it is, there may be something we can do. I'll get back to you on this soon.

In the future feel free to shoot me a private message and point me to the bug threads. I usually login to dgrin every day and the PM will trigger a notification. In the mean time, I've also set the Bug Reporting thread to send me emails every time there's a new post. That should help so I don't end up missing these.

leftquark

Denise,
If you right click on the caption overlay area and "Inspect Element", then click on the div: "<div class="sm-tile-info">" does it have the following:

.sm-tiles-infohover-show .sm-tile-info {
opacity: 0;
}

One of the support heroes confirmed he has the same issue on his site using Windows 8.1/Chrome and he said he couldn't find the above code anywhere.

Update: One of the Customizers and I spent an hour now trying to dig deeper into this. The same code that we add and works on a Mac won't work on Windows 8.1/Chrome. We've been able to successfully hide the caption overlay but we can't get it to show back up on hover. It appears Chrome is having some kind of issue with the hover action. We tried using opacity, visibility, and display code all to no avail. I'll pick up tomorrow and bring it up with a few other folks.

denisegoldberg

leftquark wrote: »

In the future feel free to shoot me a private message and point me to the bug threads. I usually login to dgrin every day and the PM will trigger a notification. In the mean time, I've also set the Bug Reporting thread to send me emails every time there's a new post. That should help so I don't end up missing these.

Thank you!

leftquark wrote: »

Denise,
If you right click on the caption overlay area and "Inspect Element", then click on the div: "<div class="sm-tile-info">" does it have the following:

.sm-tiles-infohover-show .sm-tile-info {
opacity: 0;
}

One of the support heroes confirmed he has the same issue on his site using Windows 8.1/Chrome and he said he couldn't find the above code anywhere.

Update: One of the Customizers and I spent an hour now trying to dig deeper into this. The same code that we add and works on a Mac won't work on Windows 8.1/Chrome. We've been able to successfully hide the caption overlay but we can't get it to show back up on hover. It appears Chrome is having some kind of issue with the hover action. We tried using opacity, visibility, and display code all to no avail. I'll pick up tomorrow and bring it up with a few other folks.

I don't see that code either.

--- Denise

leftquark

Denise,
Couple follow up questions: has it always been like this or did it start doing this recently? Also, are you using a full desktop computer or is it a tablet/laptop combo device like a Surface?

We haven't pushed anything live in the last few days that would have changed this behavior so I'm trying to understand where it started, or if it's always behaved this way. We do have some control over touch devices -- we disable the hover behavior since touch devices with no mouse have no hover capability. Devices like the Surface which are a hybrid can be tricky.

denisegoldberg

leftquark wrote: »

Denise,
Couple follow up questions: has it always been like this or did it start doing this recently? Also, are you using a full desktop computer or is it a tablet/laptop combo device like a Surface?

We haven't pushed anything live in the last few days that would have changed this behavior so I'm trying to understand where it started, or if it's always behaved this way. We do have some control over touch devices -- we disable the hover behavior since touch devices with no mouse have no hover capability. Devices like the Surface which are a hybrid can be tricky.

This started in December of 2013 (date on the first post in this thread is 12/23/2013).

This is on a full desktop computer running Windows 8.1. Well, I'm not sure if you would really call it a desktop - it's an all-in-one with a large screen. I believe the guts are equivalent to a laptop. The computer does have a touch screen - but I use a mouse with it.

I have been using this computer since sometime early in 2013, can't remember when I upgraded it to Windows 8.1. I just checked the release date - Windows 8.1 was released for general availability on October 17, 2013. I'm sure I upgraded as soon as it was available so I don't believe the operating system is causing the problem. It's quite suspicious given that I don't see the problem on any other operating system - but again I'm sure I was running 8.1 without this problem prior to 12/23/2013.

It seems very odd that IE and Firefox both behave properly; Chrome doesn't.
I guess the other question to ask is if something changed on Chrome around the date that this problem started. I'm not sure how to track that...

I don't have access to any other computer running Windows 8 other than my Surface. That is the Surface 2, not the Pro, so the only browser I have available on that device is IE. And IE doesn't have this problem.

--- Denise

leftquark

If you load up this page, do the items under iPhone touch/gesture events show up as "true"? http://kangax.github.io/iseventsupported/

How about in IE/Firefox?

denisegoldberg

leftquark wrote: »

If you load up this page, do the items under iPhone touch/gesture events show up as "true"? http://kangax.github.io/iseventsupported/

How about in IE/Firefox?

On Chrome:

TRUE: touchstart, touchend, touchmove, touchcancel
FALSE: gesturestart, gesturechange, gestureend

On IE and Firefox:

all entries are FALSE

--- Denise

leftquark

denisegoldberg wrote: »

On Chrome:

TRUE: touchstart, touchend, touchmove, touchcancel
FALSE: gesturestart, gesturechange, gestureend

On IE and Firefox:

all entries are FALSE

That will explain why it's working the way it is. Chrome is reporting that it's a touch device, just because it could potentially be one, if you were using it as a touch screen, when in fact you have a mouse attached. The browser doesn't give us any indication that a mouse is attached, only that you're using a touch capable device. If you are on a touch capable device, we want to show the title/caption by default because there'd be no other way to get it to display (no mouse hover), so that's why it's working how it is. I'm not sure why Chrome for Windows 8.1 works this way but everyone else is OK. From what I've read it's actually a bug in IE that it doesn't report it's touch capable but that works out for our benefit!

I'm going to try to throw together some CSS code that gets around this but it most likely will mean there's some use case (if you took the mouse off and were using it as a touch device) that wouldn't ever see captions overlays.

denisegoldberg

leftquark wrote: »

That will explain why it's working the way it is. Chrome is reporting that it's a touch device, just because it could potentially be one, if you were using it as a touch screen, when in fact you have a mouse attached. The browser doesn't give us any indication that a mouse is attached, only that you're using a touch capable device. If you are on a touch capable device, we want to show the title/caption by default because there'd be no other way to get it to display (no mouse hover), so that's why it's working how it is. I'm not sure why Chrome for Windows 8.1 works this way but everyone else is OK. From what I've read it's actually a bug in IE that it doesn't report it's touch capable but that works out for our benefit!

I'm going to try to throw together some CSS code that gets around this but it most likely will mean there's some use case (if you took the mouse off and were using it as a touch device) that wouldn't ever see captions overlays.

Thanks! I'll be happy to add CSS code to remove this issue.

I think I would prefer no caption overlays in that case anyway - the captions are visible from lightbox and I think that is OK. It's preferable to not have the overlay always showing on the images; in my opinion that behavior makes the gallery style look a bit clunky.

I still find it very interesting that this worked properly on Windows 8.1 and Chrome prior to the day I reported the problem.
--- Denise

leftquark

denisegoldberg wrote: »

It's preferable to not have the overlay always showing on the images; in my opinion that behavior makes the gallery style look a bit clunky.

I agree. In fact, I was talking to one of the Engineer's about potentially changing it that way for everyone so you wouldn't need to use the custom CSS i'm going to cook up but we'll have to decide if that's the route we want to go, or just let those of you add CSS to fix it. With it being the holidays the quickest fix is most likely going to be some Custom CSS. I'm trying to get a Windows 8.1 Virtual Machine installed so I can try to tackle it.

denisegoldberg wrote: »

I still find it very interesting that this worked properly on Windows 8.1 and Chrome prior to the day I reported the problem.

It's either 1 of 2 things: Chrome updated itself to try to address Windows 8.1's Hybrid Tablet/PC thing and as of that date set itself to be report being a touch device even if it's not ... or we added code to detect that it's a touch device. My guess is that it's the first but I don't want to push the blame off without actually knowing

denisegoldberg

leftquark wrote: »

I agree. In fact, I was talking to one of the Engineer's about potentially changing it that way for everyone so you wouldn't need to use the custom CSS i'm going to cook up but we'll have to decide if that's the route we want to go, or just let those of you add CSS to fix it. With it being the holidays the quickest fix is most likely going to be some Custom CSS. I'm trying to get a Windows 8.1 Virtual Machine installed so I can try to tackle it.

I'm happy to add some code to my site to fix this (although my preference would be not to need code). Problem is, I can fix it for my site but I still need to look at the overlays on anyone else's site where the collage style galleries are used.

Most important to me though - this means that I will be able to prevent someone else from seeing my site in this messy mode.

Thanks for your help!

--- Denise

leftquark

Ok, so let me first off and apologize because this is going to get a bit messier than I'd normally like. I installed windows 8.1 on my machine and pulled up Chrome but because my machine doesn't have a touch interface, Chrome properly reports that there's no touch elements and I cant imitate your problem. I need to find someone with a Surface. In the mean time, I'm going to try to offer some code and see if it works. Tomacz tried to write some but had trouble so I'm not sure if any of it will work. If you're ok bearing with me while we go back and forth with some attempts, hopefully we can find something that works.

First, try this:

/* Hide the title / caption bar by default */
.sm-tile-info {
  display: none !important;
}

/* On hover, display the title / caption bar */
.sm-tile:hover .sm-tile-info {
  display: block !important;
}

If that works, lets limit it only to big screens so that it still displays the captions on tablets/smartphones:

@media only screen and (min-width: 1024px) {
  /* Hide the title / caption bar by default */
  .sm-tile-info {
    display: none !important;
  }

  /* On hover, display the title / caption bar */
  .sm-tile:hover .sm-tile-info {
    display: block !important;
  }
}