Browser issue CSS issue when resizing page width in Style properties

[Old Nick]

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)


What can be done to remedy this ?
I did not find anything conclusive to prevent it...

Thanks.

 

[Old Nick]

• 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.

 

[Old Nick]

Well, is this bug under investigation or not relevant?

 

[Paul B]

All bug reports are looked into.

There is no need to bump the thread - a developer will respond in due course.

 

[Mike]

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.

 

[Old Nick]

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:

Webwide • Web Designer & Developer Community

Webwide is an inclusive, supportive community of professional and hobbyist web designers & developers. Whether you're in training, a seasoned pro or anything in between – join us in a variety of friendly chit-chat, knowledge-sharing and activities.

webwide.io

Hair loss Forum - Hair Transplant forums

Hair Loss Forums for Men, Women, and people seeking information on Alopecia, Transplants, and Hair Replacement.

www.hairlossexperiences.com

TechBoards Forum

A board for technical discussion

talkedabout.com

The Goat House

Welcome to The Goat House, the GOAT of all forums. This is a place to come and discuss anything and everything. PARTY AT THE GOAT HOUSE!!!!

www.thegoathouse.community

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



Thanks.

 

[Mike]

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.

 

[Old Nick]

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

 

[Old Nick]

This is a screenshot took in my local server width 1080px page width with no zoom.
i zoom in with picture editor after...

 

[Mike]

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).