SVG icons inside of QNotify have broken layout [chrome only]
See original GitHub issueDescribe the bug SVG icons inside of QNotify have broken layout. When a left icon is used with QNotify, the width is not calculated correctly resulting in a the svg icon taking up most space in the notify container and sometimes pushing out the elements.
Note: Issue only seems to occur with Chrome.
Codepen/jsFiddle/Codesandbox (required) https://codesandbox.io/s/broken-qnotify-quasar-pqehf
To Reproduce Steps to reproduce the behavior:
- Go to codesanbox and run
- Click on ‘Show Notification With Icon’
- Notice broken layout
- Click on ‘Show Notification Without Icon’
- Notice correctly displayed layout without icon.
See pages/index.vue
for code
Expected behavior The QNofity when used with a left icon should have its width set correctly.
Screenshots Chrome (83.0.4103.61)
Chrome Canary (85.0.4158.5)
Firefox (76.0.1)
Platform (please complete the following information): Quasar: v1.12.0 Browsers: Chrome 83.0.4103.61, 85.0.4158.5
Issue Analytics
- State:
- Created 3 years ago
- Comments:15 (8 by maintainers)
Top Results From Across the Web
Chrome not rendering SVG referenced via <img> element
This happens when refreshing the page and initial page load. I can get the image to show up by "Inspecting Element" then right...
Read more >SVGs not displaying in Chrome (Example) - Treehouse
The file paths are correct, but the SVGs are only displaying broken image icons, and the SVG used for a background image is...
Read more >5 Gotchas You're Gonna Face Getting Inline SVG ... - CSS-Tricks
My recommendation is to just hide/show via CSS classes (Technique #1 described in Swapping Out SVG Icons article), and be sure to target...
Read more >478654 - Can't use SVG for notification icon - Monorail
Steps to reproduce the problem: I have been using a PNG as my icon for a push notification from service worker. https://raw.githubusercontent.
Read more >SVG Style Inheritance and the 'Flash Of Unstyled SVG'
When CSS is disabled or fails to load for any reason—such as when you're on lo-fi, most SVG images, especially inline ones, will...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I just tried in a VM with Windows 10 and Chrome. Seems like something is wrong with local environment specific to Chrome. I’m going to guess this can probably be closed as it is only happening with me.
Thanks for everyone who tested.
I didnt bother to replace the menu button link to use SVG. I updated it now.