2

I have several simple web pages that contain a similar layout. All these pages are embedded in a bigger product within iframe, to keep them independent. Since the iframe can be resized in any way and expanded, can go fullscreen and so on, the page should adapt to it. The chosen solution was to rescale the whole content, as it makes it dramatically simple to create (and media-queries wouldn't work).

I have noticed however a problem when testing on Firefox (v68 x64). When I scale down divs with borders, at some point the borders are scaled inconsistently. Different sides of the divs will either show or not any border. The resulting effect is horrible, and I noticed that this does not happen with other browsers (not even IE11 :D).

I prepared a little jsfiddle to show what happens: jsfiddle

.container {
  width: 400px;
  height: 400px;
  background: black;
  transform-origin: 0 0;
  padding-top: 30px;
  transform: scale(0.4);
}

.btn {
  border: 2px solid white;
  margin: 20px 30px;
  height: 50px;
  color: white;
  line-height: 50px;
  padding-left: 20px;
}
<div class="container">
  <div class="btn">Btn 1</div>
  <div class="btn">Btn 2</div>
  <div class="btn">Btn 3</div>
</div>

This happens when I downscale a div that contains other divs with borders. In this example the second button appears to not have a top-border.

I obviously don't expect all pages to scale down indefinitely and still look good, just have consistent borders that do not disappear. In other browsers it works much better. Does anybody know how this problem could be solved/improved? I am not able to change the underlying conditions (scaling requirements, embedding the page), but I have full access to the page itself and I'm able to change it.

Let me know if you require more details (e.g. Screen details, default page resolution...etc).

NOTE: The suggested duplicate has nothing to do with this issue, while the problem "looks similar", a quick read would show that the browser in question is different, the basis of the problems are completely different, and going further, none of the solutions work.

tizio
  • 21
  • 3
  • @Pete please verify your self the validity of your duplicate flag, the 2 posts present what appears to be a similar problem, but actually have completely different conditions, and no working solutions are provided in the other post. If you have a solution for this I'd be happy to hear more, otherwise could you please remove the duplicate flag? Thanks – tizio May 23 '19 at 11:22
  • The crux of the problem is the same - you are scaling out and expecting the browser to render sub pixel on your scale, anyway reopened for you. If you read the duplicate the answer would be to make your border 2.5px – Pete May 23 '19 at 11:44
  • you should not scale elements that much and still expect them to look good. If you create the element in the correct size from the beginning then you can expect correct borders. If you scale things they will start to look the way you described. – cloned May 23 '19 at 11:48
  • @Pete thank you. I understand that the base of the problem is subpixel calculation, but I tested all the proposed solution and as expected nothing works. The reason I don't think it's duplicate is that it's 7 years later, different browsers, different conditions (even if, similar effect). The 2.5px solution does not change anything anyway. – tizio May 23 '19 at 12:22
  • @cloned I understand that at some point it cannot look good when you scale down too much. But since I cannot change the environment that embeds my page, I don't have power on the initial presentation of the page. What I am looking for is a "consistent look". That means, if my border is 2px all around, scaling down can apply any effect, but shouldn't start making the border disappear on random sides, if you want to make it all disappear, still better, at least it's consistent. The effect from firefox is not "obviously" the expected, in fact chrome and IE11 are much better in it. – tizio May 23 '19 at 12:27
  • Thanks all for your help anyway, I guess in lack of alternatives I will have to try and make the border thicker so that the problem at much smaller scales, but that's not really a "solution". – tizio May 23 '19 at 12:33
  • Then your only solution is to contribute to Firefox directly (since it is open source) so that it renders things like this different. Or open a bug at Firefox repository. This is nothing you have control over via css. – cloned May 23 '19 at 12:38
  • @cloned definitely a possible alternative, even if quite a lot slower and harder to implement. Actually, it seemed like svg shapes also behaves better (more consistently) since the stroke is treated as a single line and not different sides (like the border), however this also comes with a lot more overhead in interfacing the elements with js and css etc... – tizio May 23 '19 at 13:24

0 Answers0