Zoom & Fx.Slide horizontal #1086

Open
hhermsen opened this Issue Dec 30, 2011 · 2 comments

Projects

None yet

2 participants

@hhermsen
Contributor
hhermsen commented Dec 30, 2011 edited

When a div has does not has it's width set but only it's parent has, and when it is used in a Fx.Slide in 'horizontal' mode, and the IE CSS 'zoom' property is changed dynamically, the size of the surrounding div is somehow not adjusted to match the actual width of the sliding element (it seems to keep the same amount of real pixels).

Try the following two sequences in the code below (example breaks in Chrome):

Correct slide size div:

  1. Toggle slide
  2. Zoom in

Incorrect slide size div:

  1. Zoom in
  2. Toggle slide
<!DOCTYPE html PUBLIC '-/W3C/DTD XHTML 1.0 Transitional/EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />
        <script language='javascript' type='text/javascript' src='mootools-core-1.4.2.js'></script>
        <script language='javascript' type='text/javascript' src='mootools-more-1.4.0.1.js'></script>
        <script type="text/javascript">
            var fx;
            window.addEvent('domready', function() {
                fx = new Fx.Slide($('test'), {mode: 'horizontal'});
                fx.hide();
            });
        </script>
        <title></title>
    </head>
    <body>

        <div style='width: 200px'>
            <div style='height: 20px; background: red;'></div>
            <div id='test' style='height: 20px; background: blue;'></div>
        </div>

        <button onclick='fx.toggle();'>Toggle slide</button>
        <button onclick="$$('body')[0].setStyle('zoom', '125%');">Zoom in</button>

    </body>
</html>

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/359871-zoom-fx-slide-horizontal?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F22069&utm_medium=issues&utm_source=github).
@oskarkrawczyk
Contributor

FYI, zoom is not CSS3. It's a IE-specific property (http://msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx)

@hhermsen
Contributor

Thanks Oskar, with the CSS3 transform property, no problems.

@hhermsen hhermsen closed this Dec 30, 2011
@hhermsen hhermsen reopened this Dec 30, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment