Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

active pill-button visible over a screend during screen effects #720

Closed
Zingam opened this Issue · 11 comments

4 participants

@Zingam

On the BB10 simulators when a second screen fades in (or with any other effect) which is pushed on top of a screen with pill-buttons I can see the selected pill-button flickering on top of the screen during the effect. Is this due to the simulator or is it a bug? I didn't notice it in previous version.
I have no device to test it on unfortunately. Is it also a problem on the device?

Edit: I have removed the effect and it looks better now.

@tneil
Owner

Can you describe more what you mean by "flickering"... The control will re-animate and fade in its labels and the selected pill button whenever the screen is shown (pushed or revealed after another screen is popped)

@Zingam

The button appears on top of the screen that is being pushed. That button belongs to the screen below the screen that is being faded in, shifted in to view: left, up, etc.

I'm sorry my description above was incorrect.

Edit: I also noticed the same issue with data-bb-type="title" it also appears on top of everything during the animation. Unfortunately I am unable to produce a proper screenshot.

@tneil
Owner

Hmm... I'm unable to reproduce this on the Gold OS running on a Z10. Can you post the version number of bbUI that you are using? Have you tried the latest from the repo?

@Zingam

Yes, I am using the version from the repo. And I am updating it daily too. Please, note that I do not have a device. I am having that issue on the Dev Alpha simulators, maybe it's OK on a device.

@tneil
Owner

Hmm.. I haven't been able to reproduce it on a device. I'll see if I can try out one of the simulators

@mikefromcanada

Here's the problem visualized. Happening on the Q10 simulator as well:
s1
s2
s3

@tneil
Owner

ok.. that gives me a better idea of how to try and reproduce the issue

@mikefromcanada

I was able to temporarily fix the issue by modifying bbui.css. It works in my case, but I don't know what other effects this might have:

{
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
    z-index: 4;
    position: absolute;
}

.bb-bb10-pill-buttons-pill 
{
    position: relative;
    z-index: 3;
    -webkit-transition: 0.2s ease-in-out;
    -webkit-backface-visibility: hidden;
}

to

.bb-bb10-pill-buttons-table 
{
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
    z-index: 0;
    position: absolute;
}

.bb-bb10-pill-buttons-pill 
{
    position: relative;
    z-index: 0;
    -webkit-transition: 0.2s ease-in-out;
    -webkit-backface-visibility: hidden;
}
@tneil
Owner

Cool thanks for that extra added information.. I figured it had something to do with z-index, but your code will definitely give me a head start!

@mimendoza

I was able to reproduce by doing the following:

  1. on main screen, display the pill buttons
  2. load a new screen and use data-bb-effect="slide-down" on that screen
  3. outline of the pill button, container and the text will be visible

I used the workaround posted above and it solved the issue for me.

@tneil
Owner

This now looks like it is fixed

@tneil tneil closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.