Docs

[uberphoto]

Hi there,

I am having issues with scroll offset, logo size, fixed menu, and background image/video across browsers. I’m adding them into one post because they seem to be related.

Issue 1: Firefox and Edge/IE don’t show the background image or video properly (Chrome won’t show the video at all as I am on a touchscreen, but the background shows up fine). They are either shoved off to the right or squished in on both right and left for about a sixth of the screen, respectively. This problem existed prior to any custom development of the menu area. However, I have noted since, that when the page is scrolled to the next section and then back, the problem goes away until the page is refreshed.

Issue 2: Scroll to a section from a link misses the mark. This is because the logo is purposely a bit larger than the x-navbar-fixed-top container, and so stretches the x-navbar container a bit. The navbar is transparent until scroll, so this is not an issue except it scrolls to the bottom of the stretched container (as it should), leaving a transparent gap so it looks like it does not meet properly. I used some JS that I found on the forums to correct the issue, and it works (scrolling the container to overlap the section slightly), but:

– On Chrome it needs to have a clear cache and only works once
– On Firefox the gap on first load is huge, after scroll down fixes the section BG from the Issue 1, it works the same as Chrome, with no overlap
– On Edge/IE it has a larger gap, as well (though not as large as Firefox), and when scrolled to fix the section BG from Issue 1, it fixes the scroll problem and works the way I want it to, consistently (until reload).

As I said, there seems to be some overlap. Could you please check my code (again, it has mostly come from researched support posts on this forum), provided by X employees as a support measure), and help me to figure out where I am missing or what I may need to do next?

Thanks!
Login details in next post.

[uberphoto]

This reply has been marked as private.

[uberphoto]

Quick update: I did menu customization that forced the last 4 items in the nav (social icons using the prescribed method), and it made the issues with the first section on Edge/IE and firefox much (!) more pronounced. It will usually still correct after scrolldown, but it is escalating. I will leave the nav and the first section after alone until you get a chance to look at it.

Thanks again!

[Rad]

Hi there,

Thanks for writing in

Thanks for posting in. Is it a hybrid device (touch + desktop)? Please note that there are many known issues with hybrid devices, it simply detected as mobile due to touch feature. And there are features that are disabled or not working on mobile devices, hence, on touch features too.

I checked it on standard device and it’s working fine.

Thanks!

[uberphoto]

Thanks — it is a hybrid. I’m aware of issues with Chrome on hybrid devices, but not other browsers. I’ll check on a standard desktop.

What browsers did you test in?

Also, are there workarounds for said hybrid issues, if that’s what it turns out to be?

UPDATE: <It is not the hybrid. I checked on multiple desktops and the issues I describe above are duplicated exactly with the exception of the video playing in Chrome, which was a bug I was aware of already. I checked Chrome, Firefox, and Edge.

[uberphoto]

Bumping this. Any help here would be fantastic!

Thanks so much!

[Rupok]

Hi there,

Thanks for updating. Could you place an absolute full URL for the video instead of /wp-content/uploads/2016/04/29559622.mp4 ?

Also kindly use a .webm format too to get maximum browser compatibility. You can also try changing the video to another.

The other issue is related with your customization and unfortunately we can’t assist much as custom development is out of our support scope.

Thanks!

[uberphoto]

Great, thanks!

I’ll try that and get back to you.

I managed to work out the navigation issue on Chrome by adding a border to the bottom of the navbar. Still working on the other browsers.

[uberphoto]

Full URL and .webm have done nothing, unfortunately.

On Firefox and Edge browser, the entire section the video is in sits off to the right of the navigation — partially off-screen — and is actually the size of the navigation bar, now. It no longer plays on Firefox, but the background image shows up all tiny, as mentioned. Scrolling the screen no longer does anything to fix it, either.

[Paul R]

Hi Bobby,

I checked on three different browsers and your video is no longer showing up.

It looks like something is conflicting in your site because when I tested the video in one of my test sites, it seems to be working fine.

http://screencast.com/t/K8mpkMkhrENb

Can you try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

[uberphoto]

Thanks for the suggestion! Here’s what I discovered:

1. – The first section being pushed to the side (mostly off-canvas) was a little bit related to nav customization (the logo pushed 8px past the inner nav container), and 98% because I used a -60px margin on the section to tuck it under the nav. I have no idea why that happened, as I’ve done it with X for a different client with no issue.

Any ideas?

2. – The video not playing is a direct result of the plugin The Grid being activated. No idea why. I thought it might be because of the content source was Instagram, so I changes sources. I also made sure the shortcode was not present on the page. No dice. As soon as The Grid is turned on, the video and its background go blank — on any page. This was checked on multiple browsers.

I also turned off all custom CSS and removed all plugins except The Grid and Cornerstone. No video until it was turned off. This was checked on multiple computers, Windows, Mac, and Linux environments.

3. – It appears Edge does not like .webm, or there is something wrong with the .webm file. Only the .mp4 file will work.

[Rad]

Hi there,

1. I’m not sure if I understand it correctly, but would you mind providing a screen recording? I don’t see any overlapping offset with the logo and navigation.

2. Thanks for sharing, would it be okay if I enabled it back for further checking? Or do you now prefer the Essential grid?Though, I’m not having that issue on my installation.

3. Yes, please use mp4. There are many video format, and each could be compatible and incompatible to each browser.

Thanks!

[uberphoto]

Hi Rad,

I removed all of the customizations that led to the nav conflicts. I’ll have to figure out how to overlap the menu again after (it will start transparent and then go opaque on scroll).

Please feel free to re-enable and test away. It’s a sandbox at the moment and I have off-site backups. I’d prefer to use the Grid as it is lighter weight than Essential Grid, but I’ll move over if I have to. Mostly, I want to know why it isn’t working, and what’s different on your installation that makes it work fine.

Thanks!

[Rad]

Hi there,

It’s due to your The Grid’s global setting. It’s currently set to use or load its own media element (override X/Cornerstone media element).

I turned that off and the video is now working.

Thanks!

[uberphoto]

You rock much, Rad! Thank you for that!

Are you able to help me get the nav things sorted, or should I just start a new post?

(I need the nav to be transparent on the home page, and sit overtop of the first section. On scroll, it would then revert to the standard, opaque menu (which is the standard on all pages))

Thanks!

[Author]

Posts