Javascript transform:scale（）使右下角的元素消失

这只发生在谷歌CHROME和Windows10上

我正在制作一本动画书，可以检查用户的屏幕大小，并使用transform:scale（）将内容显示得尽可能大。然后有一个缩放按钮，可增加/减少比例因子。我按下鼠标并移动事件，并允许用户通过拖动鼠标滚动。该应用程序是在Angular的帮助下构建的。我面临的问题是，当用户放大很多时，右下角的内容就会消失。这里是一个实时链接。页面结构如下所示：

<div class="outer-pages-wrapper" [ngStyle]="{'max-width': (containerWidth - 100) + 'px', width: ((ebook.width * ebook.scaleFactor) + (hideRight ? 0 : (ebook.width * ebook.scaleFactor))) + 'px', height: (ebook.height * ebook.wrapperScaleFactor) + 'px'}">
  <div class="inner-pages-wrapper" [ngStyle]="{transform:'scale(' + ebook.scaleFactor + ')', '-ms-transform':'scale(' + ebook.scaleFactor + ')','-webkit-transform':'scale(' + ebook.scaleFactor + ')'}">
    <app-ebook-page></app-ebook-page>
    <app-ebook-page></app-ebook-page>
  </div>
</div>

以下是在Chrome for Windows上缩放5-6次后的屏幕截图：

---

在浏览器中放大是有限制的，如果你放大超过限制，事情看起来就不好了。 我的建议是将缩放限制到某个点，然后在达到限制时禁用缩放按钮

为了解决这个问题，您可以将溢出设置为元素的公共类

#ebook-40 .ws0 {
  overflow: auto; 
}

希望这有帮助

无溢出-

溢出-

---

似乎解决了这个问题

补充一下，我也遇到了类似的问题

transform: translate3d(0,0,0)

---

对于消失的元素。。。一个似乎仍然有效的老黑客

我不确定你有什么问题。我尝试了你发布的链接，但什么都没有消失？@IraklisGkougkousis，请开始缩放并将页面移动到右下角。浏览器缩放或缩放按钮？缩放按钮，但我点击了你的缩放按钮100次，似乎效果很好。已在Firefox和Chrome中试用。抱歉，您的建议无效。请查看更新的问题。我放了一个屏幕截图，你的规则被应用到元素上，但它仍然消失了。它对我来说很好，可以修复。你可以尝试将css添加到class.pf或id#pfb中吗。检查更新的回答，但你是说如果你不使用

溢出

规则，元素就会消失，如果你使用它，元素就不会消失？是的，如果溢出不存在，元素就会消失，如果你使用它，元素就会在你使用Chrome进行5倍缩放时出现？我这边不行对不起，但我这边不行。我在Windows10上使用的是Chrome版本78.0.3904.108（官方版本）（64位）。您是否还更改了其他内容？您可能正在查看缓存版本，或者尚未正确应用样式。能否提供包含这些样式的新版本的链接？如果我打开您提供的链接，并通过

inspector样式表

it应用上述样式。请注意，在上面的屏幕截图中，内容在我应用修复之前隐藏，在我应用修复之后显示。可能是这样的情况，

h2

和

w2

类是在构建时由一些小型插件生成的（因此每个构建都有不同的名称），在这种情况下，您需要以标记中的适当元素为目标。这两个规则都需要溢出：可见。我开始想知道为什么需要这些规则。这两个元素都有固定的高度，因此隐藏的div不在其父元素之外。

.w2.h2 {
  overflow: visible;
}

transform: translate3d(0,0,0)