When Using CSS Scale in Firefox, Element Keeps Original Position

When using CSS Scale in Firefox, element keeps original position

As thirtydot mentioned:

position: absolute;
-moz-transform-origin: 0 0;

This will do the trick.

CSS: Wrong position of transform: scale(); container children

Add to .wrap:

.wrap {
  ...
  position: relative;
  /*some prefix*/-transform-origin: 0 0;
}

You'll need to reposition the .popup (now the reference frame is the .wrap, instead of the html element), but in Chrome the scale toggle works fine after this change.

See: When using CSS Scale in Firefox, element keeps original position

css issue with position: fixed only in Firefox due to -moz-transform: scale(1);

Try moving the

-moz-transform: scale(1); 
-moz-transform-origin: 0 0;

part from #conteneur to #conteneur > div.

So instead of:

#conteneur {
    width: 960px;
    position: relative;
    margin: auto;
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

try

#conteneur {
    width: 960px;
    position: relative;
    margin: auto;
}

#conteneur > div {  
    zoom: 100%;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

See this Fiddle for a 0.4 scale example: http://jsfiddle.net/XtsRH/2/

Update:

About the > (child) selector:

• W3.org selectors
• Stack Overflow question (CSS Child vs Descendant selectors)

* is simply the universal selector, that matches the name of any element type.

I've forked your fiddle (modify scale with jQuery): http://jsfiddle.net/AgCSx/ . The jQuery selector is changed from #conteneur to #conteneur > *

CSS3 Scale not working for a in Firefox 34.0.5

Set the link to display: inline-block.

Updated Fiddle

---

Link is an inline element. And CSS transformations cannot be applied to it as mentioned here:

Transforms apply to transformable elements.

Transformable elements are:

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display
  property computes to table-row, table-row-group, table-header-group,
  table-footer-group, table-cell, or table-caption [CSS21]

• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or
  gradientTransform [SVG11].

moz-transform scale decrease div size problem

The only solution I have got so far is to wrap it all in another div container, with fixed height.

Not really what I was looking for, but until someone finds a better solution, I think its the only way to go.

How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

I was able to find the answer which is actually dead-simple.

Just need to add this to the body / html css:

-moz-transform-origin: 50% 0;

In case someone may find this helpful.

Div inline-block display and proper position after using transform: scale

Here is a quick fix for you

JSFiddle

Just add a div (for example .wrap) around .elements and change its width and height depending on scale like this.

el.parent('.wrap').css({
  width: (350 * scale) + "px",
  height: (500 * scale) + "px"
});

.wrap {
  width: 350px;
  height: 500px;
  display: inline-block;
  position: relative;
}

.elements {
  width: 340px;
  height: 490px;
  background-repeat: no-repeat;
  margin: 5px;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

Why does the contentEditable's caret disappear when it is scaled down in Firefox, IE?

Have filed this as a bug in Firefox. Thanks to the help of the guys on mozilla's IRC for reproducing this bug on trunk and figuring out whether it was a bug or not.

https://bugzilla.mozilla.org/show_bug.cgi?id=865930

---

Related Topics