CODEWITHSUNDEEP
htmlcsscss-positiontransformscale
CrimsonTide
CrimsonTide

Reputation: 77

CSS transform: scale makes bottom fixed elements disappear

I'm trying to scale the elements in my body tag so that my website looks the same on differing screen sizes. However, when I apply transform: scale(), the fixed elements associated with bottom disappear. Why is this and how can I fix it?

css

body
{
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1, 1);
}

#invite
{
    position: fixed;
    bottom: 20px;
    right: 31px;
    text-align: center;
    cursor: pointer;
}

The invite element disappears when I scale with 1.

Upvotes: 2

Views: 993

Answers (2)

Lars
Lars

Reputation: 3628

transform:scale(0.5) will create a new binding box for the position:fixed; element, (when that element is a child of the transformed item)

relevant Stackoverflow question and further explanations in the chromium bug tracker

Example 'buggy' behaviour:

div {
  margin: 20px;
  padding: 20px;
}

.body {
  background: olive;
  min-height:600px
}

.main {
  background: pink;
}

.bottom {
  background: orange;
  position: fixed;
  bottom: 0;
}

.body:hover {
  transform: scale(1)
}
<div class='body'>
  <div class="main">
    main content</div>
  <div class="bottom"> bottom content </div>;
</div>

As for alternatives: responsive design; the general philosophy is to re-arrange elements into a single vertical stack as the viewport gets smaller.

Upvotes: 2

Amit Creation
Amit Creation

Reputation: 340

It will be more helpful if you could include your code and I think you should use media query if you are trying to make your page responsive.

Upvotes: 1

Related Questions