Issue with Transform and Chrome


#1

Hi,
As you may see in the video (link bellow) I have an animaton that makes that an images moves with the mouse over.
It works fine with all browsers but I have a problem.
When
I use and I click on "Información rápida" and then close the popup, the
image disapears, and I can only see basic information of the property
and a white space.
After closing he popup I should see the image again and the basic information when the mouse is over.
I'd like to know if it is a problem with my code or if there is an issue with Chrome and Transform.
Any idea?
I use Chrome v. 45.0.2454.101 m

Link to the video: https://youtu.be/5Gp-0WpC_jQ

Site link: http://www.quieroapartamento.com/es/

Thanks for your help.

My CSS code in template.css


.ngm-thumb {
border: 1px solid #ebebeb;
-webkit-box-shadow: 0 3px 3px #cccccc;
-moz-box-shadow: 0 3px 3px #cccccc;
box-shadow: 0 3px 3px #cccccc;
float: left;
height: 261px;
overflow: hidden;
position: relative;
width: 100%;
margin-bottom: 50px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.ngm-thumb .mask {
height: 261px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.ngm-thumb a > img {
border-bottom: 1px solid #ebebeb;
display: block;
position: relative;
width: 100%;
}
.ngm-thumb .main {
border-bottom: 1px solid #ebebeb;
height: 55px;
}
.ngm-thumb .main h5 {
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 10px 0 0 20px;
position: relative;
}
.ngm-thumb .main .price {
border-color: -moz-use-text-color #ebebeb #ebebeb;
border-style: none solid solid;
border-width: medium 1px 1px;
display: inline;
float: right;
font-size: 18px;
font-weight: bold;
height: 55px;
padding: 6px 25px;
background-color: rgba(90, 186, 198, 0.05);
color: #75c5cf;
}
.ngm-thumb .main .price span {
color: #979797;
display: block;
font-size: 11px;
font-weight: normal;
text-align: center;
}
.ngm-thumb .content {
padding: 20px;
position: relative;
text-align: left;
}
.ngm-thumb .content button {
margin-top: 5px;
}
.ngm-thumb .content p span {
display: block;
font-weight: bold;
}
.ngm-thumb .content i {
padding-right: 5px;
}
.ngm-thumb img {
transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb .mask {
background-color: #fff;
opacity: 1;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);
transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb:hover .mask {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.ngm-thumb:hover a > img {
-webkit-transform: translateY(-206px);
-moz-transform: translateY(-206px);
-o-transform: translateY(-206px);
-ms-transform: translateY(-206px);
transform: translateY(-206px);
}
@media (min-width: 992px) and (max-width: 1199px) {
.ngm-thumb {
font-size: 12px;
}
.ngm-thumb,
.ngm-thumb .mask {
width: 100%;
height: 261px;
}
.ngm-thumb .main .price {
padding: 10px;
font-size: 12px;
border-right: none;
}
.ngm-thumb .main,
.ngm-thumb .main .price {
height: 55px;
}
.ngm-thumb .mask {
background-color: #fff;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);


#2

Hi,

I think the issue might be caused by the amount of CSS transforms you have on each part, its simulating a hover event on the ngm-thumb after its been clicked somehow, then still translating everything up again.

Could you simplify the transforms so that when you hover the .ngm-thumb, it moves a whole container by 206px rather than moving the mask & img together? Maybe remove the mask all together and just have the image fill the container height pushing it down, then as you hover the ngm-thumb it moves the whole thing up?

Its a really nice looking website though!

Thanks

Keith


#3

Thanks a lot for your help keefyboooo,
Tried to simplify the transforms by putting the elements in a container but didn't work.
And now not sure what you mean :Sconfused:
This is my html code.

<patTemplate:tmpl name="pageoutput" unusedvars="strip">
{JOMRES_POPUPURL_GLOBALVAR}

<div title="{PROPERTY_NAME}" class="col-xs-12 col-sm-12 col-md-6 col-lg-4 appear" data-animated="flipInX" data-start="{ANIMATION_DELAY}">
	<div class="ngm-thumb">
		<a href="#module_{RANDOM_IDENTIFIER}_popup" data-toggle="modal" random_identifier="{RANDOM_IDENTIFIER}" property_name="{PROPERTY_NAME}" property_uid="{PROPERTY_UID}"><img src="{IMAGEMEDIUM}" alt="{PROPERTY_NAME}" title="{PROPERTY_NAME}" class="img-responsive" /></a>
		<div class="mask">
			<div class="main">
				<h5>{PROPERTY_NAME}</h5>
				<div class="price">
					{PRICE_PRICE} <span>{PRICE_POST_TEXT}</span>
				</div>
			</div>
			<div class="content">
				<p>{PROPERTY_STREET}, {PROPERTY_TOWN}, {PROPERTY_POSTCODE}, {PROPERTY_REGION}, {PROPERTY_COUNTRY}</p>
				<a href="#module_{RANDOM_IDENTIFIER}_popup" data-toggle="modal" random_identifier="{RANDOM_IDENTIFIER}" property_name="{PROPERTY_NAME}" property_uid="{PROPERTY_UID}" class="btn btn-info btn-block">{QUICKINFORMATION}</a>
				<a href="{MOREINFORMATIONLINK}" class="btn btn-primary btn-block" title="{PROPERTY_NAME}">{MOREINFORMATION}</a>
			</div>
		</div>
	</div>
</div>

<script>
   jomresJquery(document).ready(function(){
	 jomresJquery('#module_{RANDOM_IDENTIFIER}_popup').appendTo("body");
	});
</script>

<div class="modal fade" id="module_{RANDOM_IDENTIFIER}_popup"></div>

</patTemplate:tmpl>

#4

Hi,

so Ive set up a quick demo (its pretty dirty so sorry about that!) - http://codepen.io/keefyboooo/pen/LpjJQY

but Ive changed the transition so its moving the whole block, rather than trying to move both a mask, content and image. I havent changed the structure of your HTML, so Ive chucked the transform on the .appear class, but you could add a new class. Ive also changed the boxes height and overflow to the .appear class too.

Im not sure if it will solve the issue, but lets hope so!

Thanks

Keith


#5

You are my hero!!!
thanks! thanks and thanks!
Now leaving to NY for a few days. When returning I will test it on my live site and I'll tell you how it works.
Thanks again!