search

MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.9k stars 1.26k forks source link

Issue with vanishing MudText on mobile that is placed over a video via z-index #9342

Open bnoffer opened 2 months ago

bnoffer commented 2 months ago

Bug type

Component

Component name

MudContainer

What happened?

I am facing a strange issue with one MudContainer: The container contains a embedded Video and a MudText element, the Video has a z-index of 10 and the MudText of 20. On Desktop the Text is displayed on the lower left of the video as it is intended, when I check mobile view during debugging via the browser debugging tools it also looks fine. However when I open the page deployed on a server via a mobile browser, does not matter if Safari, Firefox or Chrome, the text is gone.

I was able to reproduce the issue on try.mudblazor.com with the same issue.

Expected behavior

The MudText should remain visible on a Mobile Browser.

Reproduction link

https://try.mudblazor.com/snippet/QYQIYBYsJoCYHdGW

Reproduction steps

  1. Open the Reproduction Link on a Mobile Browser and on the Desktop
  2. Check if the text is visible on both

Relevant log output

No response

Version (bug)

7.0.0

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

On which operating systems are you experiencing the issue?

iOS, Android

Pull Request

Code of Conduct

Anu6is commented 2 months ago

works on my mobile (Android/Chrome)

danielchalmers commented 2 months ago

Working for me as well on Android 14 Edge. Is it possible you need to refresh your CSS cache?

bnoffer commented 1 month ago

I am seeing this issue on IOS with Safari, Firefox and Chrome and based on my Clients Feedback they have the issue on Android, although I do not know which Android Version they are running.