CSS transform on div should not affect the webview inside

Question

I load website in with webviews into my div container. The divs will take the whole screen when they get hovered.

The problem is, that the content of the webview gets affected, too with the scale of the divs.

Instead of scaling the content (in the webview its like zoom) I only want to scale the div to get the full screen of the website within.

css

html, body {                            /*  added rule  */
  margin: 0;
  height: 100%;
  border: 100px;
}
.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: transform 0.5s,          /*  changed property  */
              z-index 0.5s;
}

.box:hover {
  transform: scale(2);                  /*  added property  */
  transition-delay:0.5s;
  z-index: 10;                     /*  added so hovered is on top  */
}

#lo {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  transform-origin: left top;           /*  added property  */
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  transform-origin: right top;          /*  added property  */
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  transform-origin: left bottom;        /*  added property  */
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  transform-origin: right bottom;       /*  added property  */
}

html:

<body>
  <div class="box" id="lo">
  <webview src="https://ebay.de" style="height: 100%; width: 100%"></webview>
  </div>
  <div class="box" id="ro">
    <webview src="https://ebay.com" style="height: 100%; width: 100%"></webview>
  </div>
<div class="box" id="lu">
<webview src="https://ebay.fr" style="height: 100%; width: 100%"></webview>
</div>
<div class="box" id="ru">
<webview src="https://ebay.co.uk" style="height: 100%; width: 100%"></webview>
</div>
</body>

Temani Afif · Accepted Answer · 2018-01-24T00:57:48.683

1

Instead of using scale you can increase the height/width of the div to avoid the zoom effect of the content. In order to do that use position:absolute with your elements and adjust top/left/right/bottom properties instead of transform-origin.

Here is an example (I replaced webview with some content to show result here)

html,
body {
  /* added rule */
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.box {
  position: absolute;
  text-align:center;
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: all 0.5s;
}
.box img {
 max-width:100%;
 max-height:50%;
}

.box:hover {
  width: 100%;
  height: 100%;
  transition-delay: 0.5s;
  z-index: 10;
  /* added so hovered is on top */
}

#lo {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  top: 0;
  left: 0;
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  top: 0;
  right: 0;
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  left: 0;
  bottom: 0;
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  right: 0;
  bottom: 0;
}

<body>
  <div class="box" id="lo">
    <h1>Title</h1>
    <img src="https://lorempixel.com/400/400/" >
  </div>
  <div class="box" id="ro">
    <h1>Title</h1>
    <img src="https://lorempixel.com/500/500/" >
  </div>
  <div class="box" id="lu">
    <h1>Title</h1>
    <img src="https://lorempixel.com/600/400/" >
  </div>
  <div class="box" id="ru">
    <h1>Title</h1>
    <img src="https://lorempixel.com/400/500/" >
  </div>
</body>

edited Jan 24 '18 at 00:57

answered Jan 24 '18 at 00:17

Temani Afif

245,468
26
309
415

Replacing webviews with images looks a little bit confusing, as images are scaling with their parent divs... Anyway +1 for a good approach! – Kosh Jan 24 '18 at 00:37
@KoshVery no they are not scaling :) their height/width are increasing because they are set to 100% and without the scale effect ;) ... [i replaced images because we cannot use webviews or iframe here] – Temani Afif Jan 24 '18 at 00:42
They *look* as they are scaling, sure. – Kosh Jan 24 '18 at 00:58
@KoshVery yes but not scaling like the transform ... if we consider the general meaning of scaling, yes they are scaling, but if we compare between the transform scale and widh/height increase, there is some difference .. even if we don't see it for images and this is what making the issue for the OP and also the issue of the quesiton i show you. – Temani Afif Jan 24 '18 at 01:04
That's not a big problem with your solution, but you might replace webviews with divs or just style them with CSS. – Kosh Jan 24 '18 at 01:07
@KoshVery yes updated to add content, instead of simple images ;) – Temani Afif Jan 24 '18 at 01:08
Thank you very much! I added `.box:hover { width: 100%; height: 100%; /* transition-delay: 1s;*/ transition-duration: 5ms; transition-delay: 1s; z-index: 10; /* added so hovered is on top */ }` to make it smoother – Piter Parker Jan 24 '18 at 16:41

score 0 · Answer 2 · answered Jan 24 '18 at 00:33

If you cannot accept @TemaniAfif's suggestion (which looks great), you might back-scale your webviews:

html,
body {
  /*  added rule  */
  margin: 0;
  height: 100%;
  border: 100px;
}

webview {
  display: block;
  height: 100%;
  width: 100%;
  border: solid 10px #693;
  box-sizing: border-box;
  transform-origin: left top;   
  transition: all .5s .5s
}

.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: transform 0.5s .5s, /*  changed property  */
  z-index 0.5s .5s;
}

.box:hover {
  transform: scale(2);
  z-index: 10;
  /*  added so hovered is on top  */
}

.box:hover webview {
  transform: scale(.5);
  height: 200%;
  width: 200%
}

#lo {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  transform-origin: left top;
  /*  added property  */
}

#ro {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  transform-origin: right top;
  /*  added property  */
}

#lu {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  transform-origin: left bottom;
  /*  added property  */
}

#ru {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  transform-origin: right bottom;
  /*  added property  */
}

<body>
  <div class="box" id="lo">
    <webview src="https://ebay.de">ebay.de</webview>
  </div>
  <div class="box" id="ro">
    <webview src="https://ebay.com">ebay.com</webview>
  </div>
  <div class="box" id="lu">
    <webview src="https://ebay.fr">ebay.fr</webview>
  </div>
  <div class="box" id="ru">
    <webview src="https://ebay.co.uk">ebay.co.uk</webview>
  </div>
</body>

i was also thinking about this, but it's a bad approach to do inverse scalling ... it works but it's can create some bugs, You can read this https://stackoverflow.com/questions/48044040/transform-scale-works-incorrectly-for-odd-pixel-widths/48048934#48048934 .. we faced some issue with such inverse scaling — Temani Afif, Jan 24 '18 at 00:43
I've seen that post and even tried to solve it. But in this case we'd hardly face that problem as we don't have to align the element. Anyway it's good at leas for the research purpose. — Kosh, Jan 24 '18 at 01:05
yes but we can face a similar or aniother issue .. since we don't know the exact content of the webview, we don't know how it will behave with inverse scale ... it may work at 98% of the cases but there is always 2% of chance to have some issue ... so we can use this approach but we need to pay attention :) — Temani Afif, Jan 24 '18 at 01:07
Hi, like your code, because it runs smoother than the code above. BUT: the webviews unhovered are only 50% width and 33% height. Why? If you try to run it in electron you will see it. How I can achieve, that the website 100% in their webviews when its unhovered? — Piter Parker, Jan 24 '18 at 16:23
@PiterParker, probably something overrides the size. You might check it inspecting the element. — Kosh, Jan 24 '18 at 16:45

CSS transform on div should not affect the webview inside

2 Answers2