992 breakpoint offest?

Bug Reports
1

Hi folks @moderators,
I risk posting this in the BUG REPORTS category, as it might very well be that I missed something.

Here goes: @media (min-width:992px) seems to be ignored at stage width of 992px, but is effective at 994px.

It might look like me being picky, but as the LG Breakpoint button is set to 992px, it becomes misleading when designing a gallery (among other things).

Here are the steps to reproduce what I see as a bug, using Bootstrap Studio 6.0.1:

  1. create a blank project using Bootstrap 5.1
  2. insert a container
  3. in the Appearance pane, confirm that the container’s width matches the first max-width media query
  4. with the container selected, in the Style pane, we see a series of media queries, for 1400, 1200, 992, 768 and 576 min-width. Only the first one is active for now.
  5. click the LG Breakpoint button to set the stage to 992px, the first media query is now @media (min-width:768px)
  6. manually enlarge the stage to 994px and the media query @media (min-width:992px) comes back

It looks to me there is a (tiny but annoying) offset around that 992 breakpoint.

For the giggles, I just redownloded Bootstrap Studio 5.9.3 to try this, aaaand… this “bug” is not there!

What do you think?
Have I overlooked something?

I look forward to hearing from you guys.

2

Unless I’m missing something, it is coming up with 992 for me

image
image1617Ă—953 66.3 KB

3

Hi @richards,
thanks for sharing this. It prompted me to do more testing.
Here’s what I get using BSS 6.0.1

601a
601a2970Ă—1644 443 KB

This is what I get with BSS 6.0.0 (same with 5.9.3):

600a
600a2996Ă—1654 476 KB

Are you running BSS 6.0.0 by any chance?

4

No, I am on 6.0.1

I did manage to make it replicate the bug by changing the zoom and UI scale

2 Likes
5

Update:

It is the UI scale, it seems to make bss go a bit crazy changing all the layout values in the appearance tab
image

If doesn’t seem to affect the actual code when looking at the preview in chrome

1 Like
6

Thank you for the report and screenshots! The UI scaling can affect breakpoints due to rounding of pixel values.

@maclm can you confirm whether the bug occurs when you’ve set UI scaling to 100%?

7

Wow! Good catch @richards !

Agreed. But somehow, preview (and export) doesn’t behave exactly the same way with Safari or Firefox than Chromium-based browsers. That’s what made me discover that bug (plus the fact I designed a gallery with UI scaled at 110%).

@martin I can confirm the bug does occur with UI scaled at the following values:

  • 60%
  • 70%
  • 85%
  • 95%
  • 110%
  • 120%
  • 135%
  • 145%
  • 160%
  • 170%
  • 185%
  • 195%
8

And while we’re at it, for sake of completeness, the bug also exists in BSS 6.0.0 and 5.9.3.
I didn’t notice the UI wasn’t at the same scale when I reported yesterday.

9

I can’t test extensively right now, but I just noticed that, with UI scaled at 90%, the 992 breakpoint is working, but not the 768.

In the meantime, I’ll stick to UI at 100%.

BSS 6.0.1

10

Unfortunately there is not much we can do to fix this. Bootstrap Studio is built using Electron, which uses Chromium. So UI scaling will always lead to imprecise breakpoint calculations. Resizing the stage by hand instead of clicking the breakpoint buttons is the easiest workaround to make sure that the media queries apply.

1 Like
11

I get that. So far, everything seems fine with UI scaled at 100%. So with manual resizing, that makes two workarounds.

That said, should we give up completely on UI scaling?
It’s a nice feature, but given it is kind of broken…
Or should we make all users aware of that limitation? Perhaps a warning that pops-up when one scale the UI for the first time.

Food for thoughts.

1 Like
12

I discovered this quirk quite some time ago. If the UI is set at anything other than 100%, breakpoints in the BSS preview window do not “break” at the correct pixel size.