Flex button component's border blurs and changes width when CSS is applied

0
votes

I'm having issues with implementing a flex button component:

I have applied a CSS style to button and set border-color to, say #555555. So far, it works as expected.

Then, when my application is resized, the border of the button component becomes blurred and its width automatically changes from 1 pixel to 2 pixels, which doesn't look very well..

When I maximize the app again, after the border is blurred, the buttons' border becomes 1 pixel and looks nice.

The shift from 1px to 2px to 1px also happens when I slowly increase or decrease the width of the application.

enter image description here

What's causing this issue?

1
cssapache-flexbuttonair
Have you tried explicitly setting the width of the border? Perhaps in the CSS and on the button itself? - Mr Carl
Set the scaleMode on the button so it won't scale. It might look a bit odd, but it won't have the problem you're complaining about :) - Amy Blankenship
hmmm i am using mx.controls.Button for this i didn't find scaleMode property. - Badr

1 Answers

0
votes

i have found the mistake,

this is because if the container which contains the buttons have the x,y position in float that sets the buttons relative position in float values that is not round of automatically in flex 3.2 so the drawing of buttons looks blurred as i tries do draw the button on two pixel i.e. in case of x= 3.3 the button will have the drawing on 3 and 4 pixel . by simply rounding off this value solves the problem.

NOTE : in case of graphics.drawing method this problem is avoided automatically.