2

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.

CrimsonTide
  • 77
  • 7

2 Answers2

2

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.

Lars
  • 3,022
  • 1
  • 16
  • 28
  • Could you explain how to fix it then? – CrimsonTide Jan 10 '21 at 22:29
  • I don't know what your design looks like right now. Different designs would require different approaches. The link about responsive design should point you in a general direction. Or is there a reason you're scaling the entire body down? instead of re-arranging. It feels to mee that on a smaller screen size, the text will become unreadable. – Lars Jan 10 '21 at 22:33
  • Uploaded some simple css code in the problem so perhaps that would help? And does adding the meta tag work for laptop/desktop screens or only for mobile devices such as tablets and phones? Also would changing bottom values from pixel to vw and vh work? – CrimsonTide Jan 10 '21 at 22:36
  • Changing from px to vh/vw will not work. As soon as there is a transform applied on a parent element, a new bounding box is calculated. So any fixed child will adhere to this new bounding box. Adding the meta tag will be helpful to differentiate between the different devices. I urge you to take a look at the media queries in [this example](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query3). when the screenwidth goes below 620px, the page is re-arranged with different rule-set. – Lars Jan 10 '21 at 22:52
  • Just to be clear the meta tag only works with mobile devices correct? It doesn't affect different laptop and desktop screen sizes? – CrimsonTide Jan 10 '21 at 23:33
  • Could I dynamically change the value 1 from initial-scale so that the content ends up smaller if the screen is smaller? – CrimsonTide Jan 10 '21 at 23:39
  • Keep in mind the ` – Lars Jan 11 '21 at 09:20
1

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.

Amit Creation
  • 126
  • 1
  • 9