SVG disappears after load (static site)

Support
, ,
#1

Hi!

I’m currently working on a static website that utilizes the UIkit framework

I have some svgs that lazy load within an accordion, and only one of them (instagram logo) is giving me trouble.

The instagram svg icon will display properly in the first accordion section, but in all subsequent accordion sections this one instagram svg will display for a second and then disappear. None of the other svg icons in the accordion sections replicate this behavior.

This has only happened on netlify, and never before given me issues running locally nor on the temporary test server I’m hosting it on.

I’m completely flummoxed, even after googling around.

(Please excuse the current lack of color in the design - it’s on the todo)

Netlify Site: https://fabulousmarines.netlify.app/

Temp Hosting: http://www.geekette.studio/charity/FabulousMarines2021

Log: Netlify App

#2

I see the same behaviour on the temp hosting.

From what I’m seeing, it seems like a UIkit bug and needs to be filed on their GitHur repo. They’re pretty fast at fixing confirmed bugs. I think it’s a bug because of the following inconsistent behaviours:

  1. If you add uk-accordion="multiple:true" attribute to your <ul>, all the SVGs are clearly visible as seen in the image below. However, as soon as you close the first one, the icon disappears.

image
image1366×686 139 KB

  1. If you close the first panel before opening the second or any other one, the icon won’t be seen at all, not even for a second. This means, it’s only visible for a second when you open the second panel without closing the first.

I think, what’s happening is, as soon as the first panel closes, the Instagram icon is hidden from all the panels. Now, it’s either a UIkit bug, or you might have added some toggle or something in your JS.

On a side note, I don’t really think you need the uk-svg attribute. It’s unnecessarily increasing the DOM structure and adds more JavaScript for the browser to execute to achieve nothing significant. You can either keep the image as it is, or add the SVG code to your DOM directly.

1 Like
#3

oh dang! Weird how I never stumbled across it until now. Thank you for pointing that out

I haven’t customized the JS at all - merely calling the UIkit CDN files. Getting things functional as quickly as possible was my primary goal before going in and customizing anything

I’ll reach out to the UIkit guys and let them know what’s going on

I’ll look further into the uk-svg tag. It’s my first time using UIkit so I was simply going off the documentation

Thank you so much for all your help! You’re awesome :smile:

1 Like