The website I'm creating use a series of which have min-height set at 100vh; inside of which a complex flexbox is used.
When finishing my website I notice something that annoys me :
when using Chrome on MacOS, when you are in fullscreen and you put your mouse at top, the macOS menu and window option show up causing the vh to change (not the case on Safari).
Problem is that it is recalculating every flexbox and change image zoom (as you can see in the picture). with menu popped without menu
What would be a solution ? I still wish to make section based on vh as it renders good.enter image description here
Related
I am working in ReactJS. I have a menu bar of sorts on mobile that has position: fixed and bottom: 0. It sits stuck to the bottom of the page in portrait and landscape in all browsers except Safari.
In portrait, it works just fine. When you switch to landscape it sits in the right spot, until you scroll the page down. When safari drops the search menu, it pushes the menu bar below the screen. To me (given the position of the menu bar hasn't changed) it seems that the search menu dropping is moving the bottom of the document below the screen. From all my searching, I also haven't seen any fixes to this, it seems like this is just the way Safari is. Anyone have any suggestions?
Here is the relevant component: https://github.com/Taouen/gobble/blob/master/src/components/MobileBox.js
It may be your use of vh that is causing the problem.
Safari on IOS uses a value of vh that is 1% of screen height (i.e. it is a fixed value whether or not the search bar is showing at the top). This is so there isn't an 'uncomfortable' jump as the user scrolls down and the search bar disappears.
see for example: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
which has a workaround where you use --vh, defined as one hundredth of window.innerHeight, instead of vh.
(This should probably be a comment to the original question as it's not a full, tested answer, but I don't have enough reputation to make a comment, sorry)
I have the same problem described here whereby on higher dpi displays, firefox appears to be scaling my whole site up by 20%. This includes all site elements, not just text.
Is there a way to force firefox to display pixel-pixel accuracy? for example, I have a wrapper set to 800px at wider viewports, however, firefox is ignoring this by increasing it by 20%, which causes scrolling.
a working copy of the site is here
I have already set viewport and css reset.
The same issue is described here Note that don't want a local fix for this, but something that will work for anyone that views the site.
Thanks.
I am working on a web application that allows me to insert some custom css for the front page.
I want to have a full screen background image at the start page. I understand that I can use background-size:cover which is supported in all latest version of browsers.
body {
background-image:url(/File/Publisher/Start/startpage_background.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This works for latest version of Firefox and Chrome. However, it is not working in IE11. The background image does not shrink to cover the entire screen. It displays at its original size and is partially cropped off.
Using F12 to debug, I discover that if I disable either margin-top or margin-bottom (see screenshot), background-size property will work.
I do not want to modify the margin property introduced by the original CSS of the web application. Any way to resolve this problem?
I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :
http://codepen.io/anon/pen/oXmzLL?editors=010
Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).
Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...
I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)
I am using greybox on my business site so that users can login and access their accounts.
Example of my site
When the window is activated by selecting "login" or "sign up" at the top of the page, the size of the page or window either expands or changes (discovered by showing scroll bars on bottom and right of window.) How can I keep this from happening? I want the page to have the same size as it did before the window was activated.
While an old thread, for those still using greybox, the following update might be helpful:
Setting the GB_overlay position to "fixed" (in gb_styles.css) as Yoel suggested solved the problem for greyboxes that are not full screen (e.g., gb_page_center), but a full screen greybox (e.g., GB_showPage) still had the horizontal scrollbar and expanding browser window on Chrome, Edge, Chrome on iOS, and Safari on iOS.
Setting the GB_overlay width to 100% wasn't needed for the non-full screen greyboxes, and didn't fix the problem for a full screen greybox. Instead, setting the GB_overlay max-width to 100% fully resolved the expanding browser and horizontal scroll bar appearance in Chrome, Edge, Chrome on iOS, and Safari on iOS.
As Kevin also experienced, Firefox never had these problems with greybox, and these updated changes to the GB_overlay css had no effect on Firefox;s always correct rendering of the greybox.
Yoel's solution worked. He suggested changing the style sheet to reflect "fixed" with 100% width. This fixed the issue on all browsers.