Having trouble getting overflow:auto to work with CSS3 transformed child elements? Looking for a recommended workaround?

Issue: Browsers (FF5, Chrome12, IE9) are not recognizing css3 transforms applied to a child element inside a div when calculating the scrollHeight and scrollWidth of the containing div's scrollbars with "overflow: auto;".

<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>    
<div><img src="somelargeimage.png" /></div>

A test on jsfiddle demonstrates this issue.

http://jsfiddle.net/4b9BJ/

I am aiming to create an image viewer using css3 transforms for rotation and scaling. The goal is to have a fixed width/height containing div that allows scrolling to view the complete image content.

Any suggestions on how to efficiently resolve this problem or any workarounds would be greatly appreciated.

Answer №1

I found a solution by adding an extra div to each of the transformations and giving them fixed widths. By clipping overflow, I was able to make them the correct size. However, I had to adjust the position using relative positioning along with top and left properties to shift the images into place. http://example.com

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

Overriding Bootstrap's Sass variables

Struggling to customize Bootstrap variables in my main.scss file @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; $primary: green; ...

Show the WooCommerce checkout shipping fields and eliminate the "Choose a different delivery address?" checkbox

Is there a method to eliminate the checkbox labeled "Ship to a different address?" on the woocommerce checkout page while still displaying the shipping fields? I have attempted the following: add_filter( 'woocommerce_cart_needs_shipping_address', ...

What is the best way to make an HTML form show fields depending on certain conditions?

Initially, I created an index page containing a form with various fields. The utility was built to handle all the fields, but now there's been a change in requirements. What I need is for only the Controller Type and Test Type fields to be displayed f ...

Splitting your screen in a 10/90 column ratio using React

I am looking to split my screen into a 10/90 ratio of the total screen space. // Here is what I have attempted: return ( <> <div class="row"> <div className="col-md-4" > ; <div class="le ...

button that smooth slides out using jquery

Here is the source code for a jQuery slideout: jQuery(function($) { $('#slideClick').toggle(function() { $(this).parent().animate({left:'0px'}, {queue:false, duration: 500}); }, function() { $(t ...

Incorporating existing CSS styles into a new CSS file

I'm a little confused by the title, so let me clarify with an example. Let's say I have the following CSS code inside a file: #container_1 { width:50%; border:1px solid black; } #container_2 { background-color:red; padding:5px; ...

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

The previous user's selection of checkboxes will be disabled

https://i.stack.imgur.com/fH1g2.pnghttps://i.stack.imgur.com/Oiu6q.pngI am facing an issue where I want all the records (seats selected by the user) to be disabled, but the code provided only fetches the last record and disables it. <?php ...

Concealing the text input cursor (caret) from peeking through overlaid elements on Internet Explorer

Currently, I am facing an issue with a form that includes a unique widget. This particular widget automatically populates a text input when it is in focus. The problem arises when the widget appears above the text input as intended. In Internet Explorer ...

Utilize jQuery to insert a span element inside a paragraph element before it is appended to the DOM

My current task involves utilizing jQuery DOM elements to insert a few paragraphs into a div. The following code accomplishes this successfully: $('#detail_overlay').append($('<p />', { "class" : "detail_txt" }) .text( $(' ...

What is the best way to integrate a button within a datatable cell to display additional details in a popup window?

I am seeking help with datatable.js. I would like to insert a button inside the cells of the datatable columns to expand and display the detailed content of each cell. When I click on the red button, a popup modal should appear showing the full list of con ...

Display Text Aligned in the Middle Beside Website's Logo

Newbie to HTML and CSS here! I'm attempting to achieve a design similar to this: Below is my code snippet: <div id="topbar"> <div class="image"> <img src="images/ghwlogo.png"> </div> <div class="text ...

The functionality of HTML5 canvas image objects is not functioning as expected

I have been working on a function to retrieve an image object using HTML5 canvas, but I keep encountering an error alert (onerror event) function FetchImage() { var img = new Image(); img.src = "http://localhost/assets/images/loadedsprite.png"; ...

"Enhance your website with a Bootstrap container for sharing

I'm currently working on an app that creates a URL that needs to be shared. I'm looking for the perfect container to use with bootstrap 4 to display this generated URL. My goal is to have it resemble the functionality of a Google Drive shareable ...

Add a 'tag a' directly following 'img'

Check out this code snippet: <a href="#" class="list-group-item"> <span class="badge"><?=$st ?></span> <img class="small_profile_pic" src="<?=$pic ?>" /> aaa<a ...

When using jQuery's .each method, only the final JavaScript object element is added to the divs

I have a unique set of dynamically-created divs, each containing a Title. When a div is clicked, a modal opens (which is cleared upon click), and the Title is displayed again in the modal. My goal is to add the category descriptions into these modals, but ...

Replace the content within the iFrame completely

Is it possible to have a textarea where I can input HTML code and see a live preview of the webpage in an iframe as I type? For example, here is the code I'd like to write in the textarea: <!DOCTYPE html> <html> <head> ...

Material-UI: Eliminate the missingOppositeContent:before element from TimelineItem

I'm currently using Material-UI to construct a timeline. Here is the code snippet I am working with: <Timeline align="right" className={classes.monthlyContainer}> <TimelineItem > <TimelineSeparator className={class ...