Android's activity enter transitions won't work as intended on overlapping views

Question

Here is the scenario:

I'm trying to declare transition animation between two activities - master and detail. Master is a RecyclerView list with images, detail is LinearLayout with header image from parent's list. Transitions are declared in XML and bound to detail activity like so:

<item name="android:windowSharedElementEnterTransition">@transition/activity_enter_shared</item>
<item name="android:windowEnterTransition">@transition/activity_enter</item>

In RecyclerView's adapter transition is triggered like so:

final ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(
    mContext, 
    imgView, 
    ViewCompat.getTransitionName(imgView)
);
mContext.startActivity(new Intent(mContext, ChildActivity.class), options.toBundle());

The problem is: In @transition/activity_enter I'm applying fade on some layout elements (e.g. back button). Those elements are placed in FrameLayout over an image. This seems to cause problems with fade views, which instead of smoothly appearing on the screen, "pop in". This only happens when views are overlapping - if placed in LinearLayout everythings works as intended.

fade is declared in @transition/activity_enter like so:

<fade
    android:startDelay="300"
    android:duration="100"
    android:interpolator="@android:interpolator/linear">
    <targets>
        <target android:targetId="@id/target_id" />
    </targets>
</fade>

Note 1 - If triggered programmatically in Activity fade works fine:

final ViewGroup frame = (ViewGroup) findViewById(R.id.frame);
frame.setOnClickListener(new View.OnClickListener() {
    boolean visible;

    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(frame);
        visible = !visible;
        frame.findViewById(R.id.target_id).setVisibility(visible ? View.VISIBLE : View.GONE);
    }
});

Note 2 - Shared transition (@transition/activity_enter_shared) is custom, however, using default one doesn't solve the problem.

Note 3 - In its simplest, layouts looks like this:

<FrameLayout>
    <ImageView />
    <ImageButton android:id="@+id/target_id" />
</FrameLayout/>

however, problem is not specific to FrameLayout but rather overlapping of views.

Note 4 - For example, in the following layout Lorem will pop in, while ipsum will fade in.

Answer 1

Alright, I found an answer, for those interested.

I had to set

<item name="android:windowSharedElementsUseOverlay">false</item>

in my style definition.

From documentation:

Indicates whether or not shared elements should use an overlay during transitions. The default value is true.