I am using the jAlbum program with the Lightflow Skin to create a gallery. Works well but when I attempt to navigate the gallery on my laptop and the images will slowly creep up and the titles will disappear. I cannot replicate this issue on my desktop, however, my screen size is large enough that the max image size does not override the screen size. This happens in Firefox (multiple versions) only. In Chrome and IE it displays correctly. Also the Close X is off to the left a bit too much (In all browsers on laptop only).
It would appear that the script is calculating the top property incorrectly.
Here is a bit of code:
<div id="lightwindow_container" style="height: 469px; width: 532px; left: -266px; top: -235px; display: block; visibility: visible;">
For the photos that go off the page if I change the top property I can make it fit the page without issue. (By changing it in Firebug when looking at the page.)
Here is a screenshot showing the issue:
Here are the page(s) in question.
How do I check and see if this is a script error or simply a local browser issue and how do I fix it if it is a script error?
Note: I would add the code but there is so much code it will reach the max limit allowed here in SO.
Related
I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages.
But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%.
Similar problem was there: Force hide address bar in Chrome on Android
, but there is no solution for me.
This is not a hybrid app or something else, it's just a site.
I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up.
I think it's just normal behaviour for site by default, isn't?
Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack.
I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.
Have learned following questions here:
hide mobile browser address bar on chrome (android)
How to hide the toolbar in Chrome for Android tablets for a 100% high website
Hide address bar in android chrome browser with scroll down gesture
Hide scroll bar, but while still being able to scroll
How to hide a mobile browser's address bar?
Found a cause. Hope it will help someone who did similar amusing mistake as I.
The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):
html, body, #root {
width: 100%;
height: 100%;}
It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.
Solution is to set min-sizes instead (in addition to removing #root, of course):
html, body {
min-width: 100%;
min-height: 100%;}
Sorry for disturbing, guys)
I am making a simple web page, but on google chrome it looks perfectly fine, just how I want, but when I open the page in IE or Edge the nav-pill tabs are at the top of the screen instead of near the middle like they are in chrome.
Images:
I have the 'top' property of the div that they are in is set to 30%.
I have a lot more code, but I don't want to flood this with it, If you need more info let me know! Thanks in advance!
#bodyArea
{
width: 425px;
position: relative;
top: 30%;
left: 44.3%;
}
After testing the code you showed us i noticed as well that it didn't work in IE. From here i would conclude the percentage from top for position:relative is incompatible with IE (judging from this: https://msdn.microsoft.com/en-us/library/ms531177(v=vs.85).aspx IE takes a percentage of the parent container and it might not know the height of the container of your div). I am afraid i can't be of more help without knowing more of the code around your div.
If you have a website with a really big image as the background, the image flashes for a split second whenever you enter the site again after you have left it and you visit other sites in other tabs. It feels like the browser is reloading the image.
It does not happen if you enter the site immediately after you have left the site, it takes maybe 30 seconds.
Can this problem be fixed programmatically, or is it browser related?
PS. I use firefox, it does not happen in Chrome or IE.
PS. The size of the image is 423 kb.
Try adding placement information, as well as fallback color information:
background:#ccc url('img.jpg') no-repeat center center fixed;
Firefox usually likes things to be more explicitly coded (position:absolute, for example).
I'm having one of the strangest rendering issues with Android browsers (Galaxy Tab 10.1 and S3 so far .. haven't tested on iPhone or other mobile browsers).
I'm dynamically embedding a fixed position responsive Youtube video on a webpage. You click a button in Javascript - it creates a black backdrop (also fixed position) and a Youtube embed with an id so I can control the properties at different screen sizes. So far so good. This goes off without a hitch. I check it out in Chrome, Firefox and even IE and I'm not disappointed. Yet.
I check it on my Android phone (Galaxy S3 - stock browser) and it appears that the video is having a hard time understanding where it's supposed to be rendered. I notice at least 3 repositions before it settles on a spot. Sometimes I'm lucky to see part of the element is somewhat on screen. Most other times, not so lucky. The code hasn't changed and the browser size definitely hasn't changed; just the rendering has.
To make matters worse, it seems like the element is actually placed in the correct place but rendered incorrectly. If I click on the center (or near enough to it), the video plays! The rendering shows it playing while re-rendering constantly, still unsure of where its supposed to be.
I know this problem sounds super-crazy and it might be a tricky one to even diagnose (let alone debug) so I'm including as much code related to the whole operation as possible. Help is greatly appreciated!
Creating and Embedding the Video
donModal.addEventListener("click", function(e) {
e.preventDefault();
var donPreview = document.createElement("iframe");
donPreview.src = "http://www.youtube.com/embed/oeZgLFsglcc";
donPreview.frameborder = "0";
donPreview.allowfullscreen = "allowfullscreen";
donPreview.id = "donModalVideo";
document.body.appendChild(donPreview);
sfx.toggleBackdrop(donPreview);
});
}
Video Styles
#donModalVideo {
position: fixed;
width: 40%;
height: 50%;
top: 25%;
left: 30%;
z-index: 95;
}
URL for Test
Can't fiddle right now .. hope this is ok ...
http://openheavens.designbymobius.ca/artistes#donmoen
Solved it!!!
There were a combination of factors that contributed to the problem.
There was no height set for it (or it's parent element).
Fixed position is glitchy on mobile devices
Armed with that knowledge, I:
Changed the position property to static.
Wrote a little function to set the height as a fixed ratio of the width (I used 0.5625) which triggered every time the window was resized. Now the video size is flexible and it perfectly maintains its ratio.
Wrote a second function to set the top value as the (viewport height - video height) / 2 + window.pageYOffset. It's triggered whenever you scroll the page.
End result is a static position video which dynamically adjusts width while maintaining its ratio as well as simulates the effect of position: fixed.
The end result can be seen here. Click to watch an artist preview video :)
So take a look at www.qualificationcheck.com under both Chrome and Firefox. Alt-tab rapidly back and forth between them focusing on that little green 'help & feedback' side tab.
It appears to move position! Whys this?
Its included by a 3rd party Javascript file. I've looked into it to figure out how it calculates its position.
First it sets top: 50% to get it roughly 50% of the way down the viewport.
Then it sets
margin-top: [ "-",Math.round(tab.dimensions.height / 2), "px" ].join("")
ie minus half the height of the tab so it shifts back upwards slightly so the 'middle' of it is actually 50% of the way down the viewport (rather than the 'top').
Using Chrome dev tools and then firebug in Firefox I can see that in Chrome margin-top ends up being -33px while in Firefox it ends up being -87px.
Why the difference?
Its annoying because I want to add my own tab above or below it but I can't determine where to put my own tab if I can't rely on the 3rd-party one to be in the same position all the time!
Sorry guys, neither of the other answers helped.
I resolved this by basically copying the 3rd party js and then tweaking it so I could position it and my new tab together as one.
So basically just a work around rather than an answer to the issue.
Try adding padding-top: ?px and it should be the same for both Firefox and Chrome. Some people on the net are reporting a similar issue with margin-collapse (not a bug, apparently):
http://www.sitepoint.com/forums/showthread.php?829681-CSS-margins-displaying-differently-on-Firefox-Ie-Chrome
Margin Discrepancies between Firefox and Chrome/Safari
Firefox (and Chrome since recently) interpret margin and padding differently. Margin and padding values are added to the div height/width. You can fix this (at least for FF) by adding this to your css (put it at the top):
DIV {
-moz-box-sizing:border-box;
box-sizing:border-box;
}