The scaling transformation is not accurate for uneven pixel widths

I'm attempting to resize a div while keeping the inner element in the same position and at the same size. To achieve this, I am using transform: scale(value) on the wrapper and transform: scale(1/value) on the inside div.

The issue arises when the inner div shifts as the scale changes, particularly when the width or height of the wrapper is odd. This shifting does not occur with even dimensions.

My objective is to have multiple child elements of the wrapper scale proportionally while one element remains fixed.

Check out this example to observe the problem during scaling (hover to scale).

Example where there's no problem; the inner element maintains its position during scaling (even container dimensions):

https://jsfiddle.net/o16rau6u/5/

Example with an issue; the inner element slightly moves when scaled (odd container dimensions):

https://jsfiddle.net/o16rau6u/6/

How can I resolve this problem and prevent my elements from moving during scaling regardless of container size?

PS: The provided examples are simplified demonstrations of the issue and do not represent the actual desired output or code used. Alternative methods of achieving similar behavior are not being sought, as they can be easily implemented.

htmlcsscss-transformsscaletransform

Answer №1

Initially, I believed that the issue was related to browser calculations and rounding errors, however, it appears to be a bug. After conducting numerous tests, it consistently fails on odd values.

Here is a basic example focusing on scaleX:

body:after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  bottom: -200%;
  width: 2px;
  right: 50%;
  margin-right: -1px;
  background: rgba(0, 0, 0, 0.5);
}

.box {
  width: 200px;
  height: 100px;
  margin: 50px auto;
  background: blue;
  position: relative;
}

.inner {
  height: 20px;
  width: 20px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  text-align: center;
  color: #fff;
  margin-top: -10px;
}
<div class="box">
  <div class="inner">A</div>
</div>

<div class="box" style="transform:scaleX(2)">
  <div class="inner" style="transform:scaleX(0.5)">A</div>
</div>

<div class="box" style="width:201px;transform:scaleX(2)">
  <div class="inner" style="transform:scaleX(0.5)">A</div>
</div>

Upon closer inspection, it seems that the browser mistakenly shifts the inner div by 1 pixel to the right, even though its size is correct. This results in incorrect positioning during painting while correctly calculating the position.

https://i.stack.imgur.com/PuoLf.png

The same issue arises when applying scale solely on the container, indicating that it's not due to the inner element's scale:

body:after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  bottom: -200%;
  width: 2px;
  right: 50%;
  margin-right: -1px;
  background: rgba(0, 0, 0, 0.5);
}

.box {
  width: 200px;
  height: 100px;
  margin: 50px auto;
  background: blue;
  position: relative;
}

.inner {
  height: 20px;
  width: 20px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  text-align: center;
  color: #fff;
  margin-top: -10px;
}
<div class="box" style="transform:scaleX(2)">
  <div class="inner">A</div>
</div>

<div class="box" style="width:201px;transform:scaleX(2)">
  <div class="inner">A</div>
</div>

https://i.stack.imgur.com/4ynH2.png

Even with floating point values using scale, where there may be rounding and complex calculations involved, we observe correct outputs for even values but discrepancies for odd values:

Example with scale(1.25) & scale(1/1.25):

body:after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  bottom: -200%;
  width: 2px;
  right: 50%;
  margin-right: -1px;
  background: rgba(0, 0, 0, 0.5);
}

.box {
  width: 200px;
  height: 100px;
  margin: 50px auto;
  background: blue;
  position: relative;
}

.inner {
  height: 20px;
  width: 20px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  text-align: center;
  color: #fff;
  margin-top: -10px;
}
<div class="box">
  <div class="inner">A</div>
</div>

<div class="box" style="transform:scaleX(1.25)">
  <div class="inner" style="transform:scaleX(0.8)">A</div>
</div>

<div class="box" style="width:201px;transform:scaleX(1.25)">
  <div class="inner" style="transform:scaleX(0.8)">A</div>
</div>

Example with scale(1.33) & scale(1/1.33):

body:after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  bottom: -200%;
  width: 2px;
  right: 50%;
  margin-right: -1px;
  background: rgba(0, 0, 0, 0.5);
}

.box {
  width: 200px;
  height: 100px;
  margin: 50px auto;
  background: blue;
  position: relative;
}

.inner {
  height: 20px;
  width: 20px;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  text-align: center;
  color: #fff;
  margin-top: -10px;
}
<div class="box">
  <div class="inner">A</div>
</div>

<div class="box" style="transform:scaleX(1.33)">
  <div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>

<div class="box" style="width:201px;transform:scaleX(1.33)">
  <div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>

Answer №2

Try not nesting one of these divs inside the other; instead, place both within a third div like so:

.container {
  width: 201px;
  height: 201px;
  position: relative;
}

.inner-1 {
  width: 100%;
  height: 100%;
  background-color: blue;
}

.inner-1:hover {
  transform: scale(2);
}

.inner-2 {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="container">
  <div class="inner-1"></div>
  <div class="inner-2"></div>
</div>

This approach eliminates the need to reset the inner div's dimensions after scaling.

Answer №3

Web browsers have a history of struggling with accurate calculations, as evidenced by the fact that at one point some browsers calculated 33.33% times 3 to be greater than 100%. While improvements have been made over the years, it's still not advisable to rely on this behavior. Attempting to resize elements in this manner is not recommended.

If your goal is to resize the wrapper without affecting the background size, there are alternative methods that achieve this effect without relying on complex transforms that exclude a significant portion of internet users due to improper browser support.

This desired effect can easily be achieved with nearly universal browser support, regardless of screen size.

.wrapper {
  width: 402px;
  height: 402px;
  background-color: blue;
  position: relative;
}

.bg {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  top: 201px;
  left: 201px;
  margin-top: -10px;
  margin-left: -10px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wrapper:hover {
  width: 4020px;
  height: 4020px;
}
<div id="wrapper" class="wrapper">
  <div id="bg" class="bg"></div>
</div>

If responsiveness is important (and it should be), consider utilizing the following approach:

* {padding: 0; margin: 0;}
html, body {height: 100%;}

.wrapper {
  width: 50vw;
  background-color: blue;
  position: relative;
  padding-bottom: 50%;
}

.bg {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  top: 25vw;
  left: 25vw;
  margin-top: -10px;
  margin-left: -10px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wrapper:hover {
  width: 500vw;
  padding-bottom: 500%;
}
<div id="wrapper" class="wrapper">
  <div id="bg" class="bg"></div>
</div>

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

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

jqueryhtmljson

How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs. Is there a way to achieve this using my existing JavaScript? ...

javascripthtmlcss

When combining CSS grids, nesting them can sometimes cause issues with the height layout

Check out the code on jsFiddle .component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; } .component-container .grid-container-1 { display: grid; grid-tem ...

javascripthtmlcsscss-grid

Styling in sass gets even more powerful when using custom selectors that are

Using these mixins makes it easy to work with BEM syntax in sass 3.3.2: =b($name) .#{$name} @content =e($name) &__#{$name} @content =m($name) &--#{$name} @content +b(menu) +e(item) color: grey +e(item) +m(alert) ...

csssassbem

"Trouble with Bootstrap 4 menu: only one dropdown opens at a time

I am facing an issue where the text remains a link and the dropdown toggle works, but it is causing Dropdown-2 to open when I click on Dropdown-1. Only Dropdown-1 seems to be working properly. I can't seem to figure out why only Dropdown-1 opens no m ...

htmljquerycsstwitter-bootstrap

What could be causing my CSS transitions to fail when using jQuery to add classes?

I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover. My a ...

javascriptjquerycsscss-transitions

Plugin for turning text into "leet speak" using jQuery and Javascript

Recently, I've been on the hunt for a 1337 translator that I can seamlessly integrate into a jQuery plugin. While I believe I'm making progress, I can't shake off the feeling that something's amiss. My gut tells me that what I currently ...

javascriptjqueryhtmljquery-plugins

Incorporating pre-designed elements into the bottom section of my

I'm currently facing an issue while trying to integrate a footer content from a template into my slideout footer. The problem is that the template footer is currently spanning across the entire width of the page, and I am struggling to contain it with ...

jqueryhtmlcsstwitter-bootstrapfooter

Parent whose height is less than that of the child element

I'm working on creating a side menu similar to the one on this website. However, I'm facing an issue with the height of the #parent list element. I want it to match the exact same height as its content (the #child span - check out this jsfiddle). ...

htmlcsspositionheighthtml-lists

Is it possible to include more details in the document?

Is it possible to include additional metadata, such as a record ID, within a file without causing corruption? I am looking for ways to add extra information to files. Can anyone offer some guidance? Your help would be greatly appreciated. Thank you! ...

jqueryhtmlfilefile-uploaddata-uri

Alignment of the table with a fixed header and scrollable body

Currently, I am experiencing an issue with aligning a table. My aim is to have a fixed header and a scrollable body for the table. To do this, I have aligned the table header and body using: display: table-header-group For the table body, I have applied ...

javascriptjqueryhtmlcss

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...

javascriptjqueryhtmlcssfirefox

Tips for altering the appearance of a dropped item using JQueryUI sortable

I have a straightforward website where I need to implement the ability to drag and drop styled DIV elements between two containers. Utilizing JQueryUI's sortable function, this behavior was successfully achieved with the following code: $("#active-co ...

javascriptjqueryhtmlcssjquery-ui

Ensuring that links are functional across all directory levels: a comprehensive guide

Looking at the image included here, you can see a preview of the website I'm currently building. The plan is to have individual pages for each machine in the company's lineup. Since the navigation bar and menu will be consistent across the entire ...

phphtmlcsstwitter-bootstraphref

Ways to conceal a dynamically generated div upon page load?

I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...

javascriptjqueryhtmlcss

What is the method for altering the date format of a published article?

I am looking to modify the date format of a published post in WordPress. Currently, the date format is <?php the_time('m.d.y'); ?></div>, which appears as "1.20.2018". My goal is to change it to "January 20, 2018". Can anyone guide ...

javascriptphphtmlwordpress

How can you implement CSS styling for Next.js HTML during server-side rendering?

Explore Next.js and observe the page request in the network tab. The preview displays not only the HTML but a fully pre-styled page as well. https://i.stack.imgur.com/deJLY.png When working with Styled-Components and Material-UI, they offer the ServerSty ...

htmlcssnext.jsserver-side-renderingcritical-css

Using Reactjs Material UI Table component results in grid expansion

I'm facing an issue with my Table component nested inside a Grid component. Whenever the Table component is rendered, it causes the Grid component to expand in width. I want the Grid component to maintain its original width when the Table component is ...

htmlreactjsmaterial-ui

Incorporating external libraries is seamless when used in a .html document, however, they may encounter limitations when integrated

I am facing an issue while migrating my code from an .html file to a Quasar project. The code runs perfectly fine in the .html file, but I encounter errors when implementing it in Quasar. Here is the original code from the index.html file: <!DOCTYPE ht ...

htmlvue.jsleafletreact-leafletquasar-framework

CSS not being applied to Next.js HTML pages

Currently, I am utilizing Nextjs and including the flaticon css in _app.js as follows: import '../public/assets/css/flaticon.css'; In the upcoming section, an error is being encountered: @font-face { font-family: 'Flaticon'; src: ...

cssnext.js