Clever Geek Handbook

Adjust the zoom scale on Chrome

I showed my problem to this movie , and Chrome browser (version 44.0.2403.107 m). The background image should scale up and down after mouse hover and left. But sometimes Chrome will skip animations that give these rough movements. I tested it also on IE, Mozilla, Opera and there is no such problem, everything is fine.

I am working on enlarging the element of an element on hover, but I want the image to be scaled rather than described. Previously, I could achieve this with background-size

transition

in a list item .categoryItem

, but unfortunately IE does not support percentages in bacground-size

for transition

s. So I came up with below workaround, which is smaller but still problematic.

Why am I adding styling to an element in HTML is part of a jquery script. The concept is to allow the user to add their own images to the CMS through a tag img

that is part of the element li

, but hidden and src

copied into div

the background image url.

I tried:

  • Adding z-index

    es to categoryItem

    andcategoryItemImage

  • Adding webkit-backface-visibility:hidden

  • Adding ease-in-out

  • Postponement transition

  • Searching for a similar problem on Google in a couple of hours

What else can I do?

body {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.categoryItem {
  position: relative;
  background: black;
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemImage {
  position: relative;
  transition: all 1.5s;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
}
.categoryItem:hover .categoryItemImage {
  transform: scale(1.035, 1.035);
  -webkit-transform: scale(1.035, 1.035);
  -moz-transform: scale(1.035, 1.035);
  -ms-transform: scale(1.035, 1.035);
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemDescription {
  max-width: 500px;
  position: absolute;
  left: 50px;
  bottom: 100px;
  background-color: #ffffff;
}
      

        
        
        
      

    
<ul class="categoriesOverview">
  <li class="categoryItem" style="height: 433.3px; overflow:hidden;">
    <div class="categoryItemImage" style="height:inherit; background-image: url(http://lorempixel.com/1920/572) !important; background-position: 50% 50%;"></div>
    <div class="categoryItemDescription">
      <h2>The title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex sed neque dignissim imperdiet eget a odio. Etiam semper mollis scelerisque. Integer rutrum, dolor ac efficitur viverra, nulla augue vulputate turpis, a vulputate sapien leo
        a dui. Sed id lectus tellus. Curabitur at congue ante.</p>
      <a class="button" href="#">Click me</a>
    </div>
  </li>
</ul>
Run codeHide result


+3


source to share


1 answer


This certainly looks like a bug, but manually adjusting the values ​​seems to allow or at least make it less likely to happen. Like this:



var imgElem = document.querySelector('.categoryItemImage');
var elem = document.querySelector('.categoryItem');


imgElem.onmouseover = function(e){
    console.log(window.getComputedStyle(imgElem).getPropertyValue('transform'))
    imgElem.style['transform'] = 'matrix(1.035,0,0,1.035,0,0)'
    imgElem.style['-webkit-transform'] = 'matrix(1.035,0,0,1.035,0,0)'
}
imgElem.onmouseout = function(e){
    console.log(window.getComputedStyle(imgElem).getPropertyValue('transform'))
    imgElem.style['transform'] = 'matrix(1,0,0,1,0,0)'
    imgElem.style['-webkit-transform'] = 'matrix(1,0,0,1,0,0)'
}
               
      

        
        
        
      

    
body {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.categoryItem {
  position: relative;
  background: black;
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemImage {
  position: relative;
  transition: all 1.5s;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
}
.categoryItem:hover .categoryItemImage {
 
  -moz-transform: scale(1.035, 1.035);
  -ms-transform: scale(1.035, 1.035);
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemDescription {
  max-width: 500px;
  position: absolute;
  left: 50px;
  bottom: 100px;
  background-color: #ffffff;
}
      

        
        
        
      

    
<ul class="categoriesOverview">
  <li class="categoryItem" style="height: 433.3px; overflow:hidden;">
    <div class="categoryItemImage" style="height:inherit; background-image: url(http://lorempixel.com/1920/572) !important; background-position: 50% 50%;"></div>
    <div class="categoryItemDescription">
      <h2>The title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex sed neque dignissim imperdiet eget a odio. Etiam semper mollis scelerisque. Integer rutrum, dolor ac efficitur viverra, nulla augue vulputate turpis, a vulputate sapien leo
        a dui. Sed id lectus tellus. Curabitur at congue ante.</p>
      <a class="button" href="#">Click me</a>
    </div>
  </li>
</ul>
Run codeHide result


0


source






More articles:


All Articles