Using the transform property with the scale function causes elements positioned in the bottom right corner to vanish

Issue specific to Google Chrome and Windows 10

I'm currently working on a flipbook that adjusts content size using transform:scale() based on the user's screen size. There is also a zoom feature that allows users to adjust the scale factor. I have implemented mouse down and move events to enable scrolling by dragging with the mouse. This application has been developed using Angular framework. However, I am encountering an issue where the content at the right-bottom disappears when the user zooms in significantly. You can view the live demo here. The structure of the page is as follows:

<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>

Below are some relevant CSS rules applied:

.outer-pages-wrapper {
  display:flex;
  overflow: hidden;
}
.inner-pages-wrapper {
  transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  display:flex;
}

Refer to the screenshot showing the issue after multiple zoom-ins in Chrome for Windows:

https://i.sstatic.net/wofln.png

javascriptcssangularcss-transforms

Answer №1

Browser zooming has its limits; exceeding this limit can lead to a distorted view. It is advisable to set a maximum zoom level and disable the zoom button once that limit is reached.

To resolve this issue, you can apply overflow property to the common class of elements:

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

https://i.sstatic.net/9EmlD.png

https://i.sstatic.net/kaNTd.png

I hope this solution proves helpful.

Without overflow -

https://i.sstatic.net/jCswG.png

With Overflow - https://i.sstatic.net/JnrXv.png

Answer №2

.w2.h2 {
  overflow: visible;
}

It appears that this solution has resolved the problem.

Answer №3

In a similar situation, I also encountered the same issue and found a solution by including

transform: translate3d(0,0,0)

within the element that was disappearing. It may be considered an old trick, but it proved to be effective in resolving the problem!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the purpose of the assertEquals() method in JSUnit?

Currently, I am exploring unit test exercises with a HTML5/JS game that I created and JSUnit test runner. The simplicity of the setup impresses me, but I have noticed that even the documentation lacks a clear explanation of what assertEquals() truly does. ...

javascripthtmlunit-testingassertionsjsunit

Utilize itextsharp to transform HTML into PDF files

When I try to convert HTML to PDF using iTextSharp, the CSS styling I apply to the webpage does not get carried over to the converted PDF file. Here is the CSS code I am using: <style type="text/css"> .cssformat { ...

c#htmlasp.netcsspdf

Styling a div element in CSS with absolute positioning and the ability to

I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...

htmlcssscrollpositionabsolute

Imitate adjustment of orientation without the need to resize the browser window

Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...

javascripthtmlcss

What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text? I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far: .review:: ...

htmlcss

Guide on how to optimize an ajax call in the browser to prefetch JSON data

One scenario I am dealing with involves initiating multiple ajax calls upon page load. The first call fetches data in JSON format from the server, and subsequent user interactions trigger further ajax requests that require database queries to process the J ...

javascriptjqueryajaxjsonperformance

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

csslaravelvue.jstailwind-css

Ways to create two distinct "on click" actions for a single image to execute two distinct tasks

Clicking on an image will open a slider showing all images before filtering. Once filtered, only the selected images will be displayed in the slider. <div class="gallery row" id="gallery" style="margin:0;"> <!-- Grid column --> <div ...

javascripthtmlcss

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

javascriptjqueryajaxbootstrap-4

How to handle Object data returned asynchronously via Promises in Angular?

Upon receiving an array of Question objects, it appears as a data structure containing question categories and questions within each category. The process involves initializing the object with board: JeopardyBoard = new JeopardyBoard();. Subsequently, popu ...

javascriptarraysangular

Migration processes encountering delays due to running nodes

When running migrations in Node, I am encountering a timeout error. The specific error message is: Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. Here is the ...

javascriptnode.jsknex.js

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Embed a partial view within a Jquery modal dialogue box featuring two distinct models

I am working on a room-booking project. In my View, I have a model of rooms that displays the room ID and its characteristics using a foreach loop: @model IEnumerable<Room> <div class="roomConteiner"> @foreach (Room room in Model) ...

javascriptjqueryasp.net-mvc

Determining the Position of the Cursor Within a Div

When a link is clicked, a pop up is displayed. Here is the code for the pop up: <div class='' id="custom-popover"> <div class="arrow"></div> <h3 class="popover-title">Popover left</h3> <div class="pop ...

javascriptjquery

Require guidance and resolution

<div class="container"> <div class="top-section"> <img id="image1" /> <img id="image2" /> </div> <div class="content"> ... </div> <div class="bottom-section"> ... </div> </div ...

jquerycss

Retrieve() displays solely the initial array within an object

I am facing an issue with my Redux/React project where I am calling an API to search for a specific ID based on the useParams value. I suspect the problem lies in my return statement return data.hero.find(hero => <Hero key={hero.id} hero={hero} /> ...

javascriptreactjsapiredux

Upcoming API and backend developments

When working with the NEXT project, API Routes provide the ability to create an API endpoint within a Next.js application. This can be achieved by creating a function in the pages/api directory following this format: // req = HTTP incoming message, res = H ...

javascriptreactjsnext.jsbackend

Beginning a counter: a step-by-step guide

I am currently utilizing Angular to create a functional counter like so: <button ng-click="order.startOperation(operation)"> <p ng-if="counter.start"></p> </button> When the button is clicked, it triggers a function that initia ...

javascriptangularjs

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

When a React Router link is activated, the React Bootstrap dropdown remains open instead of closing as expected

<NavDropdown className="userDropdownButton" title="dropdown" id="user-nav-dropdown" alignRight > <div className="userDropDown"> <Link to="/user" className="userDropDownheader"> user </Link> </div> < ...

javascriptreactjsbootstrap-4react-bootstrap