1

I don't know if this is a real issue since I am seeing it mostly when using an emulator, but it seems to be reproducible, and I noticed it on a friend's Android device. URL is:

Link To Page

On some devices, particular iPad Retina emulator, when you click on the hamburger it moves the body of the page to the right as expected, but the side menu area is completely blank, despite the fact that there are elements there and you can click on them, they just are not showing up, so they are being rendered but the whole sidebar is just blank (see picture)

iPad Retina

I did discover a useful feature on the developer menu with Safari that I was not aware of. You can go to Develop -> Simulator and use the inspector for the page that is loaded in your simulator. Quite a nice feature, but still not able to quite figure out what the issue is.

It is using a Joomla! template and looking at the source seems like it could use a lot of tweaking because there are a ton of .css and .js resources, some of which probably are not needed and some which probably conflict with one another, some which are not needed on the front end, etc.

Help appreciated.

Improve this question
6
  • The issue may be related to the template you are using. It may be worth checking the JoomlaShine forums etc.
    – Neil Robertson
    Feb 28, 2016 at 0:47
  • Thanks. I have, but I will try again. It is reproducible on the iPad emulator, iPad Retina and on a real iPad, so it is an issue. Really difficult trying to figure it out though. Best I can tell is that the body has a left margin of 280px. That is the space for the mobile menu, but that space is all white despite the fact that the element is there, it just isn't displayed. It might have something to do with the transition. a ul element is the sidebar mobile menu:
    – SScotti
    Feb 28, 2016 at 2:44
  • transition-delay: 0s; transition-duration: 0.3s; transition-property: all; transition-timing-function: ease; It seems like it renders initially but at the end of the transition it is blank ?
    – SScotti
    Feb 28, 2016 at 2:45
  • I think that I've found the problem but I don't quite see how to fix it. It looks like it has to do with the effective z-index of the body. Somehow, the left margin of the body, 280px is acting like it has a z-index value greater than that of the sidebar menu.
    – SScotti
    Feb 28, 2016 at 5:18
  • This is kind of a fix: body.jsn-menu-mobile-push-left { margin-left: 0px; } but not ideal.
    – SScotti
    Feb 28, 2016 at 5:40

1 Answer 1

Reset to default
1

I was able to finally fix this, not sure exactly how, but it may have been related to prepending an element in the DOM with jQuery after the page loading and somehow messing up the z-index ?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.