Compablity issue with Chrome Web Browser - javascript

We have developed a website using HTML, css and javascriipting. When we open it in Mozilla firefox then we get correct display for the webpage but when we open it in Chrome browser then we gets a gap between news and event box and the images which we put just below it.
Link for the website is here.
I am attaching some screen shots to get a clear picture for the issue.

I guess the problem is with the height of marquee tag. In firefox, it is auto adjusting the height while in chrome it is taking some other height.
One workaround will be to give Inline height to marquee .eg:- give height:164 px.

Related

How to fix page jumping up when scrolled to bottom on IOS mobile browsers

I used Vue to create my site and desktop version works perfect. When tested on Mobile IOS Safari and Chrome the page jumps up a bit when scrolled to bottom the first time. Android works fine. This problem doesn't happen the second time you scroll to bottom before you refresh the page. This problem also won't happen if you test it on desktop through dev tools.
The site's profile page does not have this problem.
I made a screen recording of the behavior: https://drive.google.com/file/d/1B93xtwF8f2VWAVegLbsZFULn3TymUCNZ/view?usp=sharing
I converted all the vh values to px to prevent browser reflow like so
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh',${vh}px);
it fixed my layout but didn't help with the jumping problem.
I also tried to set up a fixed height to the body by assigning CSS height values through Jquery .css method, when the fixed height is taller than the actual content, this problem does not happen.
I'm sorry that I don't have a snippet to reproduce this problem, I have no idea where the problem is at all.
My site url is https://www.jingqi.work
The expected result would be without the jumping up movement when scrolled to bottom, basically like how the profile page behaves.

Why isn't my page working when the same when I view it on my phone?

Here's a link my page: https://intense-bayou-64974.herokuapp.com/
I built it originally for PC, and then made adjustments with media queries and some jQuery code to adapt to a smaller scree size. It works well in my browser on my desktop PC when I resize the window, but as soon as I looked at it on my phone it had a white margin that took up half the screen real estate and none of my media queries seemed to take in effect. What am I doing wrong here?
It the green circles–I can view your site in chrome and 'scroll left' and see it's overflowing the container. See here: https://www.dropbox.com/s/7lmks1wo6e2qajx/Screenshot%202016-11-02%2014.50.14.png?dl=0
If you add overflow: hidden to .categories you can see the problem not occurring.

Images inside posts re-sized gradually to be in zeros width and height in android browser

I've got many reports from Android visitors to my blog said that when they are browsing any post from my blog, the images inside the posts get re-sized gradually to be hidden completely (width and height like be zeros, just the shadow of the image is visible).
I've tested that and I confirm the issue in android browser and Facebook browser as well, but Google Chrome shows everything OK.
I don't know what is causing this problem, JavaScript or CSS problem? I'm using a bootstrap css code for images for responsiveness on mobile devices.
Seems this line did the problem:
img {box-sizing:border-box};
I removed it and it works in Android browser!

Safari Browser div collapsing height

On this page http://bit.ly/202URGh, when I click on Book Size (Second row icons) and then click on Book type (First row icons), the image collapses into the other div.
I have added clearfix, but that seems to have had no effect. This seems to be a problem only in Safari on Mac. Other browsers work fine.
Can someone help. My problem is compounded because I don't have a Mac to test.
I understood the source of the problem. Issue was because I was trying to get the height of image dynamically. Safari (and webkit based browsers) do not seem to support dynamic height computation. Jquery was returning the height as zero and hence the div was collapsing.

jquery mobile web app leave empty white space at page bottom

I have a web app (i used JQM) currently customized to iphone.
all elements are fitted to the page height, but i'm getting a white space on the page bottom.
when viewing the page on pc browser everything is fine, so i guess the problem is related to the iphone screen resolution configuration on some CSS file.
Please view the web page on your iPhone to see the white space (scroll down):
http://aspspider.org/elimiz/check4/MC_v1.0.htm
Help me
I'm not seeing the issue on my iPhone but it sounds like a problem I had on a site.
I fixed it by setting a wrapper surrounding all the content as overflow: hidden. It might take some trial and error to find which element to put this on, and you might need to define height values on elements that dont have height explicitly stated.

Categories