starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

RadzenIcon with fullscreen icon can cause element.requestFullscreen to misbehave in Chrome #1647

New Issue
Closed
opened 2026-01-29 17:56:41 +00:00 by claunia · 9 comments
claunia commented 2026-01-29 17:56:41 +00:00
Owner
Copy Link

Originally created by @LostBeard on GitHub (Mar 1, 2025).

<RadzenIcon Icon="fullscreen"> can cause element.requestFullscreen() to misbehave in Chrome.

Steps to reproduce

  • Start a new Blazor WASM Standalone project
  • Add Radzen to the project
  • Add a <RadzenIcon Icon="fullscreen"> to a page
  • Add code to the page to call element.requestFullscreen() on a div when a button is clicked
  • Run the project in Chrome
  • Click the button to request fullscreen
  • Observe that the entire document goes fullscreen and not the element that called requestFullscreen()

Expected behavior

The element that called requestFullscreen() should go fullscreen and not the entire document.

Actual behavior

The entire document goes fullscreen and not the element that called requestFullscreen()

Additional information

This issue does not occur in Firefox or Edge. It has been observed in Chrome 133 on Windows 10, and macOS Sequoia.

Workaround

The issue seems to not appear if you do not use a <RadzenIcon> with a fullscreen icon. If you use a different icon, the issue does not occur.

Demo

Demo

How to use the demo

Reproduce the issue

  • Visit the demo link above.
  • Click the With RadzenIcon in the nav bar
  • Click the Toggle Fullscreen button
  • Observe the issue

!IMPORTANT: Close the tab, and in a new tab go to the Demo again. Simply refreshing the tab does not fully reset the issue.

Show the issue does not occur without RadzenIcon

  • Visit the demo link above.
  • Click the Without RadzenIcon in the nav bar
  • Click the Toggle Fullscreen button
  • Observe the issue does not occur

There are are 3 pages.

  • Home Explains the issue.
  • With RadzenIcon Demonstrates the issue with a RadzenIcon.
  • Without RadzenIcon If done first, usually works as expected.

The only difference between the With RadzenIcon and Without RadzenIcon pages is the use of a RadzenIcon.

If you go to the page without the RadzenIcon and click the fullscreen button, the issue does not occur.

If you go to the page with the RadzenIcon and click the fullscreen button, the issue usually occurs.

The issue may start just by visiting the page with the RadzenIcon before going to the page without. Going fullscreen using the page without the RadzenIcon first may cause the page with the RadzenIcon to work as correctly.

Version

  • Radzen 6.0.19
  • Windows 10 64 bit
  • macOS Sequoia (tested on browserstack.com)
  • Chrome 133

TL;DR

  • <RadzenIcon Icon="fullscreen"> can cause element.requestFullscreen() to misbehave in Chrome.
  • The issue is inconsistent and does not occur reliably even with the steps stated above.
  • <RadzenIcon> with icons other than fullscreen have shown to not trigger the issue.
Originally created by @LostBeard on GitHub (Mar 1, 2025). `<RadzenIcon Icon="fullscreen">` can cause `element.requestFullscreen()` to misbehave in Chrome. ## Steps to reproduce - Start a new Blazor WASM Standalone project - Add Radzen to the project - Add a `<RadzenIcon Icon="fullscreen">` to a page - Add code to the page to call `element.requestFullscreen()` on a div when a button is clicked - Run the project in Chrome - Click the button to request fullscreen - Observe that the entire document goes fullscreen and not the element that called `requestFullscreen()` ## Expected behavior The element that called `requestFullscreen()` should go fullscreen and not the entire document. ## Actual behavior The entire document goes fullscreen and not the element that called `requestFullscreen()` ## Additional information This issue does not occur in Firefox or Edge. It has been observed in Chrome 133 on Windows 10, and macOS Sequoia. ## Workaround The issue seems to not appear if you do not use a `<RadzenIcon>` with a `fullscreen` icon. If you use a different icon, the issue does not occur. ## Demo [Demo](https://lostbeard.github.io/RadzenIconFullscreenIssue/) ### How to use the demo #### Reproduce the issue - Visit the demo link above. - Click the `With RadzenIcon` in the nav bar - Click the `Toggle Fullscreen` button - Observe the issue !IMPORTANT: Close the tab, and in a new tab go to the Demo again. Simply refreshing the tab does not fully reset the issue. #### Show the issue does not occur without RadzenIcon - Visit the demo link above. - Click the `Without RadzenIcon` in the nav bar - Click the `Toggle Fullscreen` button - Observe the issue does not occur There are are 3 pages. - `Home` Explains the issue. - `With RadzenIcon` Demonstrates the issue with a RadzenIcon. - `Without RadzenIcon` If done first, usually works as expected. The only difference between the `With RadzenIcon` and `Without RadzenIcon` pages is the use of a RadzenIcon. If you go to the page without the RadzenIcon and click the fullscreen button, the issue does not occur. If you go to the page with the RadzenIcon and click the fullscreen button, the issue usually occurs. The issue may start just by visiting the page with the RadzenIcon before going to the page without. Going fullscreen using the page without the RadzenIcon first may cause the page with the RadzenIcon to work as correctly. ## Version - Radzen 6.0.19 - Windows 10 64 bit - macOS Sequoia (tested on browserstack.com) - Chrome 133 ## TL;DR - `<RadzenIcon Icon="fullscreen">` can cause `element.requestFullscreen()` to misbehave in Chrome. - The issue is inconsistent and does not occur reliably even with the steps stated above. - `<RadzenIcon>` with icons other than `fullscreen` have shown to not trigger the issue.
claunia commented 2026-01-29 17:56:42 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Mar 1, 2025):

I couldn't reproduce this on both Windows and macOS using latest Chrome. The behavior looks identical in both pages.

Image

To be honest I don't think we can do anything that could affect the built-in browser API.

@akorchev commented on GitHub (Mar 1, 2025): I couldn't reproduce this on both Windows and macOS using latest Chrome. The behavior looks identical in both pages. ![Image](https://github.com/user-attachments/assets/99c6624c-6384-4c48-8ed3-1ee8a09c0ecb) To be honest I don't think we can do anything that could affect the built-in browser API.
claunia commented 2026-01-29 17:56:42 +00:00
Author
Owner
Copy Link

@LostBeard commented on GitHub (Mar 1, 2025):

I just used the repo I linked and browserstack.com.

The first picture:
Load the page and click Toggle Fullscreen on the With RadzenIcon page. The entire document is made fullscreen instead of the element that called requestFullscreen.

Image

Second picture:
Reload the browserstack instance and click Toggle Fullscreen on the Without RadzenIcon page. It works as expected, making the element that called requestFullscreen fullscreen, and not the document.

Image

@LostBeard commented on GitHub (Mar 1, 2025): I just used the repo I linked and browserstack.com. The first picture: Load the page and click `Toggle Fullscreen` on the `With RadzenIcon` page. The entire document is made fullscreen instead of the element that called `requestFullscreen`. ![Image](https://github.com/user-attachments/assets/e86dc002-d290-45e9-93ac-1e92dc370aa9) Second picture: Reload the browserstack instance and click `Toggle Fullscreen` on the `Without RadzenIcon` page. It works as expected, making the element that called `requestFullscreen` fullscreen, and not the document. ![Image](https://github.com/user-attachments/assets/b83d2488-4191-4b54-89ed-5a5eeed0577b)
claunia commented 2026-01-29 17:56:42 +00:00
Author
Owner
Copy Link

@LostBeard commented on GitHub (Mar 1, 2025):

It is possible it is a bug in Chrome. Your software triggers it so I reported it here. I like Radzen, so I felt it was helpful to document this issue in case others have it.

Not saying you can fix, but I am making you aware.

@LostBeard commented on GitHub (Mar 1, 2025): It is possible it is a bug in Chrome. Your software triggers it so I reported it here. I like Radzen, so I felt it was helpful to document this issue in case others have it. Not saying you can fix, but I am making you aware.
claunia commented 2026-01-29 17:56:42 +00:00
Author
Owner
Copy Link

@LostBeard commented on GitHub (Mar 1, 2025):

I had a very large app that this was causing an issue in. It took my hours to narrow it down to <RadzenIcon Icon="fullscreen"> and Chrome before I could minimally reproduce the issue in a repo to show you guys.

Just hoping it saves someone else the hours I lost. 👍👍

@LostBeard commented on GitHub (Mar 1, 2025): I had a very large app that this was causing an issue in. It took my hours to narrow it down to `<RadzenIcon Icon="fullscreen">` and Chrome before I could minimally reproduce the issue in a repo to show you guys. Just hoping it saves someone else the hours I lost. 👍👍
claunia commented 2026-01-29 17:56:43 +00:00
Author
Owner
Copy Link

@LostBeard commented on GitHub (Mar 1, 2025):

https://github.com/user-attachments/assets/505be1e6-1aff-4593-af94-17423f5d7518

@LostBeard commented on GitHub (Mar 1, 2025): https://github.com/user-attachments/assets/505be1e6-1aff-4593-af94-17423f5d7518
claunia commented 2026-01-29 17:56:43 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Mar 1, 2025):

Tried it in macOS with the same results - identical behavior in both pages.

https://github.com/user-attachments/assets/45f455ed-e900-4c52-abac-431bab31aa65

Probably the text "fullscreen" triggers it. You can try using the unicode symbol instead.

<RadzenIcon Icon="&#xe5d0" />
@akorchev commented on GitHub (Mar 1, 2025): Tried it in macOS with the same results - identical behavior in both pages. https://github.com/user-attachments/assets/45f455ed-e900-4c52-abac-431bab31aa65 Probably the text "fullscreen" triggers it. You can try using the unicode symbol instead. ``` <RadzenIcon Icon="&#xe5d0" /> ```
claunia commented 2026-01-29 17:56:43 +00:00
Author
Owner
Copy Link

@LostBeard commented on GitHub (Mar 1, 2025):

You are not reloading the app in a new tab before testing each page as I said is required to properly test the issue.

@LostBeard commented on GitHub (Mar 1, 2025): ### You are not reloading the app in a new tab before testing each page as I said is required to properly test the issue.
claunia commented 2026-01-29 17:56:43 +00:00
Author
Owner
Copy Link

@LostBeard commented on GitHub (Mar 1, 2025):

Proper debugging requires the ability to follow directions.

Closing unfixed issues that you cannot reproduce because you refuse or are unable to follow directions doesn't help anyone.

@LostBeard commented on GitHub (Mar 1, 2025): Proper debugging requires the ability to follow directions. Closing unfixed issues that you cannot reproduce because you refuse or are unable to follow directions doesn't help anyone.
claunia commented 2026-01-29 17:56:43 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Mar 1, 2025):

I have spent 30 minutes of my weekend to troubleshot this issue. Even suggested a workaround despite being unable to reproduce what is obviously a browser bug. If this is not enough for you please move on to a different component library.

@akorchev commented on GitHub (Mar 1, 2025): I have spent 30 minutes of my weekend to troubleshot this issue. Even suggested a workaround despite being unable to reproduce what is obviously a browser bug. If this is not enough for you please move on to a different component library.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1647
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?