Input Cursor Visibility Issue with <input> Inside SVG in Responsive Context
Hello Mozilla Team,
I am encountering an issue in my React project where an <input> tag is used as a child of an SVG element. The input cursor visibility is inconsistent: it shows properly on some screen ratios but disappears on others. This issue appears to be related to how the input and SVG elements are rendered in different viewport sizes and resolutions.
Steps to reproduce:
Create an SVG element and embed an <input> tag within it. Test the behavior on screens with varying resolutions and aspect ratios. Expected Behavior: The input cursor should be consistently visible across all screen ratios and resolutions.
Actual Behavior: The cursor visibility is inconsistent. On certain screen ratios, the cursor either doesn’t show or is misaligned.
This behavior greatly affects the usability of such components, especially in responsive designs. I would appreciate any guidance or a potential fix in future updates to address this rendering inconsistency.
Thank you for your attention to this matter. Please let me know if you need further details or a code example to reproduce the issue.
Best regards, Gyanendra Kumar Dubey