Image/video dispappears on scrolling

Hi,

Using Bootstrap v3 this is good to know that:

Some utilies classes can show / hide content
https://getbootstrap.com/docs/3.4/css/#helper-classes-show-hide

Some other utilities classes that show/hide content based on media queries
https://getbootstrap.com/docs/3.4/css/#responsive-utilities

Okay, thank you. Very confused.  Not sure what is causing the space below the image and the disappearence of the image / video when you scroll. This is a mobile issue only. Works fine on the desktop.

Are you seeing what I have? 

Please see this for the issue.  This is on my iphone. Notice the space. Notice how the image disappears.
Mobile Display.MP4

Hi,

First I would try to avoid inline CSS because this usually break the Bootstrap logical.

So instead of using  style=... use one of the utilities classes
So don't use

style="display: none;"

Select allOpen in new window

 And use one of these depend of the case...

Some utilies classes can show / hide content
https://getbootstrap.com/docs/3.4/css/#helper-classes-show-hide

Some other utilities classes that show/hide content based on media queries
https://getbootstrap.com/docs/3.4/css/#responsive-utilities 

Now when you have a show/hide issue search the code on you page and spot all

style="display: none;"

Select allOpen in new window

If there is no result found then check if one of the  utilities classes is use

<div class="show">...</div>
<div class="hidden">...</div>

Select allOpen in new window

or other possible class name * would be replace by column number

visible-xs-*   
visible-sm-*   
visible-md-*   
visible-lg-*   
hidden-xs   
hidden-sm   
hidden-md   
hidden-lg

Select allOpen in new window

Hi, I did a complete search....nothing found on the page.

Also check on embed file like php include
also this can be in Javascript / plugin sometimes

if you use Notepad++
you can search in all project file using CTRL+ F and Find in File tab

Still looking!

Yea, that space is the breadcrumb area.  The reason it disappears is that it is just scrolling up.

Can you verify that when you use the browser dev tools you get the same view as I did, then when you try it live it is the same or different on the phone?

First I would try to avoid inline CSS because this usually break the Bootstrap logical. 

True, but this is only for testing.

The problem is only on the phone. When I reduce the window on the laptop no problems.

I understand that.  You will use media queries or the bootstrap helper classes to show and hide https://getbootstrap.com/docs/3.4/css/#helper-classes-show-hide based on the viewport.

But right now, we are just focusing on the mobile version.  

If you can make the updates I showed, you and test on mobile, then we can make it work for both.

Hi,
For example you have this class on your page head that may hide the video in smaller view

@media (max-width: 540px) {
  #video {
    display: none;
  }
  #full-bg {
    display: block;
  }
}

Select allOpen in new window

Put all class that you have in the head of your page and  put those in external CSS file and place this file link after the Bootstrap CSS link.

Also you have some error into the console that you may want to fix
Unable to preventDefault inside passive event listener due to target being treated as passive

.....I'm getting blurry eyed.  Basicall the image replaces the video on portrait mode on the cell phone. That works. The two isuues that I'm having, both on the mobile is the space under the image and the image disappearing when you go down on the page.

Let's just focus on mobile. Forget about the desktop view for now.  

As I asked a few comments ago, https://www.experts-exchange.com/questions/29230239/Image-video-dispappears-on-scrolling.html#a43371759  Can you confirm if you make the changes I recommended that it works as expected on mobile in both the browser console as I have shown and on the actual phone. Don't worry about how it looks on desktop, we can work with that and put things back together.

I cannot reproduce on my side but from your video printscreen
I suspect the issue you have is related with the script you are using for the scroll to top and the script with sticky menu
and  z-index

do you have same issue with other images on this page?

If you go to the This IS Angela page. It works fine. Except for that space once again.  But the image stays there.

This fixed the disappearing image. I removed it.

phone-menu-bg

Select allOpen in new window

I just caught the issue.

You have the height of the breadcrumb set to 812px.  

YUP! How do I access it? And what do I change it to?

<!-- =============== START BREADCRUMB ================ -->
   <section class="no-mb">
        <div class="row">
            <div class="col-sm-12">
                <!--div class="breadcrumb-fullscreen-parent phone-menu-bg"-->
                <!--div class="breadcrumb-fullscreen-parent"-->
               <div>
                    <!--div-->
               <div class="breadcrumb breadcrumb-fullscreen alignleft small-description overlay almost-black-overlay" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="0">                         
                   <div id="video">
                       <video id="background-video" width="400" controls autoplay loop muted>
                       <source src="videos/Mango20228.mp4">
                            Your browser does not support HTML5 video.
                     </video>
                  </div>

                  <div id="full-bg">
                       <img src="assets/img/home/Angela3.png">
                  </div>
                    </div>
            </div><!--end bread  -->
            </div>
        </div>
    </section>
   <!-- =============== END BREADCRUMB ================ -->

Select allOpen in new window

Okay almost there!  Everything works. Except when I turn my phone in landscape mode.

<style>
#video video{
    width:100%;
}
</style>
<section class="visible-xs visible-sm">
            <div>
                <img src="assets/img/home/Angela3.png">
                </div>
   </section>
   <section class="nb hidden-xs hidden-sm">
         <div id="video">
                       <video id="background-video" width="400" controls autoplay loop muted>
                       <source src="videos/Mango20228.mp4">
                            Your browser does not support HTML5 video.
                     </video>
         </div>
   </section>

Select allOpen in new window

Thank you so much...this was a tuff one!

Did you get it figured out as far as the landscape mode?

yes thank you. i changed the breakpoint to 540 and that worked. once again thank you for your help.