I want to zoom all content (not just fonts) such that subsequent content moves to accomodate the resized content. (Sorry if “flow” is the wrong word.)
Chrome and modern Firefox only. NOT trying to work on IE or pre-Blink Opera.
zoom works as desired in Chrome, but Firefox doesn’t support zoom.
Mozilla recommends transform:scale instead of zoom, but it doesn’t behave like zoom. transform:scale doesn’t push subsequent elements. The resized elements overlap subsequent elements.
(Note, transform:scale requires transform-origin: left center to fix positioning, but that still doesn’t fix the flow issue.
div {
transform: scale(4);
transform-origin: left center;
}
Is there a css property that will push subsequent elements as desired, to prevent overlap?
i read online that you should be looking at animating the max-height property to simulate the zoom (and keep the reflow around the elements).
I found this article that has height/width scaling examples so maybe combine this information with that…
Thx! but not sure i understand how that applies to my request. They don’t mention zooming in your article. They are resizing a div – it’s unclear that will resize the contents of the div. Also, it appears to require chopping the source element into slices, and giving them classes like .left and `.center’.
so what I was trying to say was that there seems to be a way to use max-height to do the effect you want (zoom). I thought sharing the article about the manipulation of width/height would give you ideas on how to do that (combine these two thoughts).
Unfortunately I lost the link that mentioned the max-height method as an option to zoom.
(but basically changing that property will trigger a reflow unlike the scale)
