question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVG icons inside of QNotify have broken layout [chrome only]

See original GitHub issue

Describe 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:

  1. Go to codesanbox and run
  2. Click on ‘Show Notification With Icon’
  3. Notice broken layout
  4. Click on ‘Show Notification Without Icon’
  5. 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) screenshot

Chrome Canary (85.0.4158.5) screenshot2

Firefox (76.0.1) screenshot3

Platform (please complete the following information): Quasar: v1.12.0 Browsers: Chrome 83.0.4103.61, 85.0.4158.5

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
cmcleesecommented, May 29, 2020

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.

0reactions
cmcleesecommented, May 29, 2020

The codesandbox referenced in link above does not have icons loaded properly image

I didnt bother to replace the menu button link to use SVG. I updated it now.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found