This is hard to explain ... If you use css scale (and zoom) to zoom down (less than 1), in explorer 9 and 10, the surrounding elements still treat their content area as if it had its original size. for example
transform:scale(0.5);
width:200%;
will be treated as 200% wide, even though its displayed 100% wide.
Let me demonstrate this in a fiddle:
http://jsfiddle.net/pike/CAbcH/
I see both horizontal and vertical scrollbars in IE10. Using 'zoom' instead has the same effect.
How can I explain explorer it doesnt need scrollbars beyond the content ? A jquery solution is acceptable, too.
Here's one solution - http://jsfiddle.net/pike/YmfGC/
Not all that neat, using browser sniffing, it basicly writes a wrapping <div> around the zoomed div, for IE only, using the width() and height() the browser found after rendering the page ...
I changed the overflow:hidden on #scroll and overflow:auto: on #zoomed (ie reversing their overflow basically), making the scrolls function as they should be - is this what you were looking for? Though I have a question on why you would need the to have the scales as you can make it look just as you wanted with css.
Related
I'm tearing my hair out for a couple of days on a "simple" css case with two nested div.
Basically, I have two div; a container and a content. To reproduce the case, I've attached a jsfiddle link below. The width and the height in pixels of the content are deduced from the container size and you need to input these values by hand by using chrome developer tool for instance. At the end, if you take a look to the size of the content via a developer tool, the container and the content have the same size in pixel. Under Chrome and IE, scrollbars appears whereas the two div have the same size but with FF they don't.
Of course, I could get rid of the overflow: auto but I'd rather like to understand what's wrong and what could be solved my issue.
See an example below.
Link to the example: Scrollbars issue with Chrome&IE
Thanks for your help.
You should use overflow:hidden to hide the scrollbars.
if you want to hide both scroll you should use overflow:hidden .
We've coded a site, everything works great until you start using the zoom function of Safari/Chrome.
It seems some elements zoom correctly (see the search in attached screenshot) making a horizontal scrollbar, but html and head don't scale more than 100% of the viewport so when you scroll right making it look pretty bad…
I've tried width: 100% !important and many other things but nothing seems to affect it, any ideas would be most appreciated!
Fix seems to be putting a min-width on the body that's the same as the containers width, not ideal but seems to do the trick…!
So I did notice that zoom related layout problems are commonly being dealt with, but I couldn't find an answer to my case - I wrote a WEB calc, and the buttons just slide out of place when zooming in and out, in Chrome and Firefox but not in IE. What is the way to fix it?
Give width:220px to your #main div
If you closely look at your CSS you will see that the buttons together(5 in a line) actually have more width than the Main div while resizing. Increasing the width to 220px solves that problem. Another solution could be to give max-width and max-height to all elements, another can be to properly layout your elements and don't just rely on the browser's positioning. Doing the latter is an trivial task.
For the sake of searchers, my solutions was to use a table to make the calculator eventually. I know using tables for layout is considered a bad practice, but considering a calculator shape is not supposed to adjust to new contents or to the size of the end-user's screen (at least in my case) it seemed to be the best implementation. It was the only way to avoid losing the layout shape in zoom-in zoom-out, which is kind of what div's are all about.
I am using floats when specifying dimensions of an element. Please see this jsfiddle jsfiddle.net/yMTGJ But both Chrome and Opera fail setting up the right widths and as a result there one pixel gap between the two divs, as you can see from see image i.stack.imgur.com/O9ZxW.png Can't Chrome and Opera handle the float properly? Why is there that one pixel gap?
this happens because you're specifying the width as 466.5px, wich is roundet up to 467px by other browsers (firefox for example). chrome tries to render this correctly, so there's a one pixel line that shows in red/yellow combined (wich confuses the browser and looks like but isn't a gap).
to avoid this, don't use half pixels to specify dimensions (what did you think the example should look like? chrome does exactly what i would expect, but i don't know your intention to use half pixels).
take a look at http://jsfiddle.net/Lupna/ where i have adjusted the width of the outer div to 932px and the inner ones to 466px - works perfectly on chrome.
EDIT:
another solution that would make all browsers display the same if you need a width of 933px would be to built in a gap on your own that should be there: http://jsfiddle.net/eS7Qd/
There's your problem: width: 466.5px; Decimal point is not universally supported. Some info and possible solution: http://www.latentmotion.com/browsers-trim-pixel-decimals/
As said above the problem is with the half pixel. Monitors work and pixels which is a block of light which cannot be halfed. Some browsers may try and be clever to fix this problem but you cannot obtain a consistent result across all browsers when doing this.
I would recommend you work to a 960px width and use something like http://www.960.gs
There is no way you can get this to work as it is not valid CSS.
I'm having problems with mozilla moz-transform scale property.
I'm looking for a replacement of the zoom property, which works fine in everything except firefox.
When I want to shrink the div, its "content" does shrink, but the size of the container stays the same, leaving a big gap around other content.
Is there any way I can force the container size to decrease as well?
To clarify I put a simple example here.
Open it in chrome and firefox, you will see the difference.
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.
Instead of mixing zoom and -moz-transform, why not use -webkit-transform for Chrome? Then you can adjust the height equally on all browsers.