1

Please see https://codepen.io/anon/pen/VzmVNe

.wrapper { 
  width: 200px; height: 200px; padding: 10px;
  border: 1px solid #888; overflow: auto;
}
.scale { 
  width: 400px; height: 300px;
  background-color: red; 
  transform: scale(0.4);
  transform-origin: 0 0; transition: all 0.5s ease-in-out;
}
.scale:hover { 
  transform: scale(4); 
}

Because after transformation the inner div is visually smaller than its wrapper, I would think that the scrollbar will not be visible.

In addition, it behaves differently between Chrome and IE. In IE11, both x- & y-scrollbar are visible, but in Chrome only y-scrollbar is.

Hover over the inner div works as expected.

What I would like to achieve: no visible scrollbar in both IE & Chrome until you hover over the inner div. Is it possible? Thx.

Larry
  • 11
  • 3
  • Possibly related: [Overflow behavior after using CSS3 transform](https://stackoverflow.com/questions/21248111/overflow-behavior-after-using-css3-transform) – showdev Aug 04 '17 at 22:04

2 Answers2

1

A quick fix might be:

.scale { 
    width: 400px; height: 300px;
    background-color: red; 
    transform: scale(0.4);
    transform-origin: 0 0; transition: all 0.5s ease-in-out;
    overflow: hidden;

}

.scale:hover { 
    transform: scale(4); 
    overflow: scroll;
}
VA79
  • 474
  • 3
  • 7
0

The reason your initial state has a vertical scroll bar is because your inner DIV (.scale) has a larger height than the outer DIV (.wrapper):

.wrapper { 
  width: 200px; 
  height: 200px; /* <---- */
  padding: 10px;
  border: 1px solid #888; overflow: auto;
}
.scale { 
  width: 400px; 
  height: 300px;  /* <---- */
  background-color: red; 
  transform: scale(0.4);
  transform-origin: 0 0; transition: all 0.5s ease-in-out;
}

To avoid the initial scrollbar, resize the inner DIV to something <= the outer DIV.

Note - I think you are going to have more difficulty when the user attempts to grab and scroll the content as the scrollbars are NOT part of the inner DIV and thus the :hover effect will be disengaged and the scaling will go back to the original, reduced size.

Forty3
  • 2,199
  • 1
  • 14
  • 19
  • It probably makes sense for IE only. In Chrome, why it has only vertical but not horizontal scroll even though both width and height are larger in inner div? – Larry Aug 07 '17 at 14:45