Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Desktop) minimumInteractiveComponentSize + size/width/height Modifier leads to inconsistent placement #4999

Open
F-J-S-P opened this issue Jun 20, 2024 · 4 comments
Labels
bug Something isn't working rendering Low level rendering upstream (AOSP) Issue is in Google issue tracker

Comments

@F-J-S-P
Copy link

F-J-S-P commented Jun 20, 2024

Describe the bug
When using both .minimumInteractiveComponentSize() and .size()/.width()/.height() on the same composable, it is placed correctly when the value used for .size() is an even number and one pixel off (to the right for width, down for height, both for size) when it is an odd number. I noticed this when using IconButton scaling with AppTheme.fixedLineHeight (in this case 19), since IconButton has .minimumInteractiveComponentSize() integrated, but it is not restricted to them.

Affected platforms

  • Desktop (Windows, Linux, macOS)

Versions

  • Libraries:
    • Compose Multiplatform version: 1.6.11
  • Kotlin version: 2.0.0
  • OS version(s) (required for Desktop and iOS issues):
    • Linux Mint 21.3 Cinnamon:
      • Cinnamon Version: 6.0.4
      • Kernel: 6.5.0-41-generic
  • OS architecture (x86 or arm64): x86
  • JDK (for desktop issues): 21.0.3

To Reproduce
Steps to reproduce the behavior:
Run this code snippet:

 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.material3.*
 import androidx.compose.ui.*
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.*
 import androidx.compose.ui.window.*
 
 fun main() = application {
     Window(
         onCloseRequest = ::exitApplication,
         title = "ComposeBugTest",
     ) {
         Column{
             repeat(20) {
                 Box(
                     modifier = Modifier
                         .size((it+1).dp)
                         .minimumInteractiveComponentSize()
                         .background(Color.Green.copy(0.7f)),
                 )
             }
         }
     }
 }

Expected behavior
20 green boxes appear above each other without space between them and aligned with the window's left border.

Observed behavior
20 green boxes appear, every second one is shifted one pixel to the right and below, leading to unintended spaces and overlap.

Screenshots
Screenshot from 2024-06-20 03-47-48

Additional context
The Column + repeat is just to make the problem and how it's tied to odd numbers more obvious (the first box is not visible as it's fully inside the second one); the problem will also appear when using just a single box.

@F-J-S-P F-J-S-P added bug Something isn't working submitted labels Jun 20, 2024
@MatkovIvan
Copy link
Member

MatkovIvan commented Jun 20, 2024

Screenshot 2024-06-20 at 08 50 01

It's reproducible on Android too. Even/odd vs what's happen there is probably just because of different density

@MatkovIvan MatkovIvan added rendering Low level rendering and removed submitted labels Jun 20, 2024
@MatkovIvan
Copy link
Member

@F-J-S-P could you please duplicate this issue to Google issue tracker (with main point about Android/common instead of Desktop)? Thanks

@F-J-S-P
Copy link
Author

F-J-S-P commented Jun 20, 2024

o7
https://issuetracker.google.com/issues/348199047

@MatkovIvan MatkovIvan added the upstream (AOSP) Issue is in Google issue tracker label Jun 20, 2024
@okushnikov
Copy link

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working rendering Low level rendering upstream (AOSP) Issue is in Google issue tracker
Projects
None yet
Development

No branches or pull requests

3 participants