Browser issue CSS issue when resizing page width in Style properties

Nicolas FR

Well-known member
Affected version
2.2.x
Hello,

I have noticed a small border problem for some time:
There is a space, I guess 1px, to the left of all the blocks on my site. This space is located between the container block and its contents. I searched for hours and hours in my extra.less for what could create this problem but I did not find anything. At the end I even completely emptied extra.less but the problem persisted.

In the style properties I also went through my modifications but nothing allowed to delete this space. I have consulted other forums and on some I have observed the same phenomenon. Weird.

Finally I have just found why this appears: when you change the general width of the forum (originally 1200px) the phenomenon appears, whether you decrease or increase the width.

As you cans see in those images (without/with page width changes)

Capture d’écran 2020-12-04 123111.webp Capture d’écran 2020-12-04 123021.webp
What can be done to remedy this ?
I did not find anything conclusive to prevent it...

Thanks.
 
  • You can reproduce this issue with XF Default Style with any modification, just the page width.
  • If you create your own block with some <div> the phenomenon doesn't appears.
 
Last edited:
I can't reproduce this and I also can't see why this would change anything like what's shown in the screenshot. The pageWidthMax property isn't used in individual blocks (which is what your screenshot shows).

We'd likely need to be able to see this issue happening somewhere.
 
Hello, thanks for the reply.

and I also can't see why this would change anything like what's shown in the screenshot
Me too. That's why i posted this into the report bug forum...

The pageWidthMax property isn't used in individual blocks (which is what your screenshot shows)
I know, but i noticed that beacause if you don't change the pageWidthMax the phenomenon doesn't occurs. And in my test before posting here there is no other setting who would trigger this. That's why i posted screenshots with and without page width change so you can see the results...

This is some example in other forums:

Capture d’écran 2020-12-10 131453.png

Capture d’écran 2020-12-10 132614.png

Capture d’écran 2020-12-10 132823.png

Capture d’écran 2020-12-10 133020.png

I just downloaded XF 2.2.2 and installed it on a local server, I didn't make any changes. Here is the result for a pageWidthMax set to 1080px

Capture d’écran 2020-12-10 135615.webp

Thanks.
 
What browser and OS? And are you using a non-standard zoom level?

This seems more like a browser rendering quirk. I can see it appear in Chrome if I scroll through some zoom sizes, but that doesn't require a max width change.
 
What browser and OS?
FF, Chrome or Edge is the same behaviour for me. Win10 last update.
And are you using a non-standard zoom level?
In a tactile screen, but just to see better, it's the same with standard zoom level 100%
I can see it appear in Chrome if I scroll through some zoom sizes
Here in xenforo.com i can't reproduce it. See with Chrome, Edge and FF

Capture d’écran 2020-12-10 141634.webpCapture d’écran 2020-12-10 141700.webpCapture d’écran 2020-12-10 141807.webp
 
As everything stands, I can only chalk this up to something local to you. There's really no reason for this to happen from our code, so I can only guess it may be a rendering quirk driven by something with your specific machine and how browsers are rendering on it (potentially due to pixel rounding).
 
Top Bottom