Link to home
Create AccountLog in
Avatar of David Schure
David Schure

asked on

Image/video dispappears on scrolling

I'm having an issue viewing the index page on a cell phone in portrait/landscape mode.  There is a space between the image/video and the title "Angela Goes Deep" (also an image)  In edition to a space the image/video disappear completely when you start to scroll down.   Works fine on a laptop when I resize the window.

https://angelahunte.com/index.html

Misty

2121

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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

Open in new window

User generated image

User generated image

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
Avatar of David Schure
David Schure

ASKER

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? 
I am sorry, I think I mislead you.

The issue is the breadcrumb area seems to not contain anything, yet is controlled by your css.  

If you take the full-bg div and move it above the breadcrumb row (hide not on mobile), then hide the entire breadcrumb row you will have below.

User generated image

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;"

Open 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;"

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

Open 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

Open 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;
  }
}

Open 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

Open in new window

When you say it works, do you mean the space between the bottom image and the text?  You have this page coded differently than the index page. 

User generated imageThe other page is the breadcrumb class that is creating that extra space. That is why my suggestion is to get rid of it on mobile and show the image in it's own row.

User generated image

I just caught the issue.


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


User generated image




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

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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>

Open 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.