Bootstrap: modal and transform-scale on body

Question

I use bootstrap 4 (but I have the same issue on bootstrap 3).

In my css, I have a transform:scale(0.9) on my body.

When I open a modal the page scrolltop (that's not really a scroll, I think its a css issue) and the modal and backdrop are on the top of the page and not just upper the clicked button ...

You can reproduce it easily: open a modal and in DOM editor(f12) add transform:scale(1) on the body.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="transform:scale(1)">
top<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
down down<br>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

*"I have a transform:scale(0.9) on my body."* - Why? I can't think of any reason to do this. Also a `transform` is **entirely visual** - the elements do not change actual size. — Paulie_D, Aug 15 '18 at 14:53
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Aug 15 '18 at 14:53
Why ? ahah ... because on mac my new design look "BIG" and fat ... apparently all the internet look zoomed on mac ... My client want to have the same render on mac and windows so the only way we found is to apply a scale on the body ... That work fine the only problem is the modal ... — Sébastien Demoustiez, Aug 15 '18 at 20:32

score 0 · Accepted Answer · answered Aug 16 '18 at 06:23

0

The problem is that apparently browser can't render a transform:scale() and a position fixed ... No direct relation with bootstrap

Positions fixed doesn't work when using -webkit-transform

answered Aug 16 '18 at 06:23

Sébastien Demoustiez

1,356
1
10
17

Bootstrap: modal and transform-scale on body

1 Answers1